:root {
  /* Backgrounds & Surfaces */
  --bg:        #f5f1e9;
  --bg2:       #ede8dc;
  --card:      #ffffff;
  --line:      #e3dcd1;
  --line2:     #c8c0b3;

  /* Typography */
  --ink:       #141210;
  --ink2:      #28251e;
  --muted:     #58544e;
  --muted2:    #96918b;

  /* Brand Green */
  --green:     #0f6642;
  --green-d:   #0b5035;
  --green-m:   #1a7a4c;
  --green-lt:  #e5f3ec;
  --green-xl:  #f0f9f4;

  /* WhatsApp */
  --wa:        #1faa55;
  --wa-d:      #178f47;

  /* AI Services Section Tokens */
  --ai-bg:         #f1faf5;
  --ai-card:       #ffffff;
  --ai-brd:        #cde9da;
  --ai-stat-bg:    #e5f3ec;
  --ai-accent:     #0f6642;
  --ai-accent-lt:  #e5f3ec;
  --ai-accent-m:   #1a7a4c;
  --ai-text:       #28251e;
  --ai-muted:      #58544e;
  --ai-stat-num:   #0f6642;
  --ai-tool-bg:    #e5f3ec;
  --ai-tool-text:  #0b5035;
  --ai-result:     #0f6642;

  /* Fonts */
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', -apple-system, sans-serif;

  /* Type Scale */
  --xs:   0.70rem;
  --sm:   0.82rem;
  --base: 0.9375rem;
  --md:   1.05rem;
  --lg:   1.2rem;
  --xl:   1.45rem;
  --2xl:  1.85rem;
  --3xl:  2.3rem;
  --hero: 2.8rem;

  /* Shadows — multi-layer warm */
  --sh:  0 1px 2px rgba(20,18,12,.04), 0 4px 16px rgba(20,18,12,.07);
  --sh2: 0 2px 8px rgba(20,18,12,.05), 0 12px 40px rgba(20,18,12,.11);
  --sh3: 0 4px 16px rgba(20,18,12,.06), 0 24px 64px rgba(20,18,12,.14);

  /* Radius */
  --r:  10px;
  --r2: 18px;
  --r3: 26px;
  --r4: 34px;
}


/* ════════════════════════════════════════════════════════════
   COMPONENT: reset.css  — Reset & Base
════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--base);
  line-height: 1.78;
  color: var(--muted);
  background-color: var(--bg);
  background-image: radial-gradient(rgba(20,18,12,.032) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
img { display: block; max-width: 100%; }
a  { text-decoration: none; color: inherit; }
button, input, textarea, select { font: inherit; }
button { border: none; background: none; cursor: pointer; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: sidebar.css
════════════════════════════════════════════════════════════ */
.sidebar {
  position: fixed; left: 18px; top: 20px; bottom: 20px; width: 300px;
  border: 1px solid var(--line); border-radius: var(--r4);
  background: linear-gradient(180deg, #fff 0%, #fdfcfb 100%);
  padding: 24px 22px 20px;
  display: flex; flex-direction: column; gap: 0;
  z-index: 200; box-shadow: var(--sh3); overflow: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.sidebar::-webkit-scrollbar { display: none; }

@media (max-width: 860px) {
  .sidebar {
    left: 0; top: 0; bottom: 0; width: 290px;
    border-radius: 0 var(--r3) var(--r3) 0;
    transform: translateX(-100%); box-shadow: none;
    overflow-y: auto;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 6px 0 48px rgba(20,18,12,.22);
  }
}

.sb-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(20,18,12,.5); z-index: 190;
  backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s ease;
}
.sb-overlay.open { display: block; opacity: 1; }

/* .sb-top removed — replaced by .sb-profile block */
.sb-logo { font-family: var(--font-display); font-size: var(--xl); color: var(--ink); letter-spacing: -.01em; }
.sb-status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--green-d) 0%, var(--green) 55%, var(--green-m) 100%);
  color: #fff; padding: 7px 18px; border-radius: 99px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  box-shadow: 0 4px 18px rgba(15,102,66,.32), inset 0 1px 0 rgba(255,255,255,.18);
  white-space: nowrap; position: relative; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.sb-status-chip:hover {
  box-shadow: 0 6px 24px rgba(15,102,66,.42), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.sb-status-chip::before {
  content: '';
  position: absolute; top: 0; left: -100%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transition: left .5s ease;
}
.sb-status-chip:hover::before { left: 160%; }
.sb-status-chip i { font-size: 11px; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ── Sidebar profile block ─────────────────────────────────── */
.sb-profile {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 9px; padding-bottom: 4px;
  flex-shrink: 0;
}

/* Outer ring: gradient border + drop shadow */
.sb-avatar-ring {
  position: relative; flex-shrink: 0;
  width: 108px; height: 108px; border-radius: 50%;
  background: linear-gradient(145deg, var(--green-m), var(--green-d));
  padding: 3px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(15,102,66,.30), 0 2px 8px rgba(15,102,66,.18);
}

/* Inner avatar image */
.sb-avatar-img {
  display: block; width: 102px; height: 102px;
  border-radius: 50%;
  border: 3px solid var(--card);
  background: var(--card);
  object-fit: cover; object-position: center top;
}

/* CSS-only initials fallback — shown when avatar image fails to load */
.sb-avatar-fallback {
  display: none; width: 102px; height: 102px; border-radius: 50%;
  background: linear-gradient(145deg, var(--green-m), var(--green-d));
  color: #fff; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--2xl);
  letter-spacing: -.03em; border: 3px solid var(--card);
}


.sb-name {
  font-family: var(--font-display); font-size: var(--xl);
  font-weight: 400; color: var(--ink);
  letter-spacing: -.01em; line-height: 1.15; margin: 0;
}
.sb-title {
  display: block;
  font-size: 0.76rem; font-weight: 500; color: var(--ink2);
  line-height: 1.6; text-align: center; margin: 0;
}

.sb-divider { border: none; border-top: 1px solid var(--line); margin: 14px 0; }

.sb-contact-block { margin-bottom: 14px; }
.sb-contact-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: var(--sm); font-weight: 500; color: var(--ink2); transition: color .18s;
}
.sb-contact-item:last-child { border-bottom: none; }
.sb-contact-item i  { color: var(--green); width: 16px; font-size: 13px; flex-shrink: 0; }
.sb-contact-item:hover { color: var(--green); }
.sb-location { display: flex; align-items: center; gap: 7px; font-size: var(--xs); color: var(--muted2); padding-top: 8px; }
.sb-location i { font-size: 11px; }

/* Sidebar section navigation — shown only inside mobile sidebar */
.sb-nav { display: none; flex-direction: column; gap: 5px; margin: 0 0 4px; }
.sb-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; border-radius: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1.5px solid rgba(15,102,66,.12);
  transition: background .15s, color .15s, border-color .15s;
}
.sb-nav-link i { width: 15px; text-align: center; font-size: 12px; color: var(--green); flex-shrink: 0; }
.sb-nav-link span { flex: 1; }
.sb-nav-link:hover {
  background: var(--green-xl); color: var(--ink2);
  border-color: rgba(15,102,66,.22);
}
.sb-nav-link.active {
  background: var(--green-lt); color: var(--green); font-weight: 700;
  border-color: rgba(15,102,66,.28);
}
.sb-nav-link.active i { color: var(--green-d); }
/* Second divider (between nav and socials) — hidden on desktop, visible on mobile */
.sb-nav-sep { display: none; }

.socials { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.socials a {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink2); font-size: 13px; transition: .18s;
}
.socials a:hover { background: var(--green); color: #fff; border-color: var(--green); transform: translateY(-2px); }

.sb-copyright { font-size: 10px; color: var(--muted2); margin-bottom: 12px; }
.sb-ctas { display: flex; flex-direction: column; gap: 9px; margin-top: auto; padding-top: 12px; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: buttons.css
════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r); font-family: inherit; border: none; background: none;
  font-family: var(--font-body); font-weight: 600; font-size: var(--base); line-height: 1;
  transition: .2s; white-space: nowrap; position: relative; overflow: hidden;
}
.btn-full { width: 100%; }
.btn-primary {
  background: linear-gradient(150deg, var(--green-m) 0%, var(--green) 55%, var(--green-d) 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(15,102,66,.22), 0 6px 20px rgba(15,102,66,.18);
  letter-spacing: .01em;
}
.btn-primary:hover {
  background: linear-gradient(150deg, var(--green) 0%, var(--green-d) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(15,102,66,.28), 0 12px 32px rgba(15,102,66,.22);
}
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg,transparent,rgba(255,255,255,.18),transparent);
  transform: translateX(-130%); transition: transform .45s;
}
.btn-primary:hover::after { transform: translateX(130%); }
.btn-wa  { background: var(--wa); color: #fff; box-shadow: 0 2px 12px rgba(31,170,85,.22); }
.btn-wa:hover  { background: var(--wa-d); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(31,170,85,.28); }
.btn-outline { background: transparent; color: var(--ink2); border: 1.5px solid var(--line2); letter-spacing: .01em; }
.btn-outline:hover { border-color: var(--green); color: var(--green); background: var(--green-xl); }
.btn-sm { padding: 9px 15px; font-size: var(--sm); }


/* ════════════════════════════════════════════════════════════
   COMPONENT: float-nav.css
════════════════════════════════════════════════════════════ */
.float-nav {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 100;
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(255,255,255,.92); padding: 10px;
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh2);
  backdrop-filter: blur(8px);
}
.float-nav-link {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  font-size: 14px; color: var(--muted);
  background: transparent;
  border: 1.5px solid rgba(15,102,66,.12);
  transition: background .15s, color .15s, border-color .15s;
}
.float-nav-link i { color: var(--green); }
.float-nav-link span {
  position: absolute; right: calc(100% + 9px); top: 50%;
  transform: translateY(-50%) translateX(5px);
  background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  opacity: 0; visibility: hidden;
  transition: opacity .18s, transform .18s; pointer-events: none;
}
.float-nav-link span::after {
  content: ''; position: absolute; left: 100%; top: 50%;
  transform: translateY(-50%); border: 4px solid transparent; border-left-color: var(--ink);
}
.float-nav-link:hover span { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.float-nav-link:hover { background: var(--green-xl); border-color: rgba(15,102,66,.22); }
.float-nav-link.active {
  background: var(--green-lt); border-color: rgba(15,102,66,.30);
}
.float-nav-link.active i { color: var(--green-d); }


/* ════════════════════════════════════════════════════════════
   COMPONENT: layout.css — Main Content & Section Base
════════════════════════════════════════════════════════════ */
.main-content { margin-left: 352px; margin-right: 86px; max-width: 820px; padding: 40px 0 80px; }
.section { padding: 44px 0; scroll-margin-top: 26px; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--green); background: var(--green-lt);
  border: 1.5px solid rgba(15,102,66,.22);
  padding: 7px 14px; border-radius: 99px; margin-bottom: 18px;
}
.pill i { font-size: 11px; }
.section-title {
  font-family: var(--font-display);
  font-size: var(--3xl); color: var(--ink);
  line-height: 1.12; letter-spacing: -.022em; margin-bottom: 14px;
}
.section-title span { color: var(--green); }
.section-lead { font-size: var(--md); max-width: 620px; margin-bottom: 28px; line-height: 1.72; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: hero.css
════════════════════════════════════════════════════════════ */
.hero { padding-top: 20px; }
.hero-h1 {
  font-family: var(--font-display);
  font-size: var(--hero); color: var(--ink);
  line-height: 1.06; letter-spacing: -.025em; margin-bottom: 18px;
}
.hero-h1 span  { color: var(--green); }
.hero-h1 em    { font-style: italic; color: var(--green); }
.hero-sub      { font-size: var(--md); max-width: 560px; margin-bottom: 26px; line-height: 1.72; }
.hero-ctas     { display: flex; gap: 11px; margin-bottom: 32px; flex-wrap: wrap; }
.hero-ctas .btn-primary { font-size: var(--md); padding: 14px 22px; }

.proof-strip {
  display: flex; align-items: stretch; gap: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r2); overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh);
}
.proof-item {
  flex: 1; padding: 20px 22px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 5px;
}
.proof-item:last-child { border-right: none; }
.proof-num   { font-family: var(--font-display); font-size: var(--3xl); color: var(--ink); letter-spacing: -.025em; line-height: 1; }
.proof-label { font-size: var(--xs); font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: about.css
════════════════════════════════════════════════════════════ */
.about-body p { margin-bottom: 14px; max-width: 640px; line-height: 1.8; }
.about-highlights { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.hl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--sm); font-weight: 500; color: var(--ink2);
  background: var(--card); border: 1px solid var(--line); padding: 7px 14px; border-radius: 99px;
  box-shadow: 0 1px 3px rgba(20,18,12,.05);
  transition: border-color .18s, box-shadow .18s;
}
.hl-chip:hover { border-color: var(--green); box-shadow: 0 2px 8px rgba(15,102,66,.12); }
.hl-chip i { color: var(--green); font-size: 11px; }
.about-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 6px; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: ai-services.css
   ─────────────────────────────────────────────────────────
   FIXED: Uses the SAME light-theme as the rest of the
   portfolio. No dark backgrounds, no dark text, no separate
   color palette. Differentiated only via a subtle green-tinted
   background and a top-border accent — consistent with the
   portfolio's card style.
════════════════════════════════════════════════════════════ */
.ai-section {
  background: var(--ai-bg);           /* #f1faf5 — light green tint */
  border: 1px solid var(--ai-brd);    /* #cde9da */
  border-radius: var(--r4);
  padding: 44px 38px;
  margin: 0 -4px;
  position: relative; overflow: hidden;
}

/* subtle decorative ring — light version */
.ai-section::before {
  content: ''; position: absolute; top: -80px; right: -80px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(20,96,61,.07) 0%, transparent 70%);
  pointer-events: none;
}

/* pill label */
.ai-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--xs); font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--green); background: var(--green-lt); border: 1px solid var(--ai-brd);
  padding: 6px 13px; border-radius: 99px; margin-bottom: 16px;
}

/* section title & lead — inherit portfolio defaults */
.ai-section .section-title { color: var(--ink); }
.ai-section .section-title span { color: var(--green); }
.ai-section .section-lead  { color: var(--muted); }

/* ── Stats bar ── */
.ai-stats {
  display: flex; gap: 0;
  background: var(--card);
  border: 1px solid var(--ai-brd);
  border-radius: var(--r2); overflow: hidden; margin-bottom: 28px;
  box-shadow: var(--sh);
}
.ai-stat-item {
  flex: 1; padding: 14px 18px; border-right: 1px solid var(--ai-brd);
  display: flex; flex-direction: column; gap: 3px;
}
.ai-stat-item:last-child { border-right: none; }
.ai-stat-num   { font-family: var(--font-display); font-size: var(--xl); color: var(--green); line-height: 1; }
.ai-stat-label { font-size: var(--xs); color: var(--muted); font-weight: 500; }

/* ── Cards grid ── */
.ai-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

.ai-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: 26px 22px;
  transition: .22s;
  position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh);
}
/* top accent line on hover — same as svc-card pattern */
.ai-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--green), var(--green-m));
  opacity: 0; transition: opacity .22s;
}
.ai-card:hover::before { opacity: 1; }
.ai-card:hover {
  border-color: var(--green);
  transform: translateY(-3px);
  box-shadow: var(--sh2);
}

/* icon */
.ai-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--green-lt); color: var(--green);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--lg); margin-bottom: 14px; transition: transform .22s;
}
.ai-card:hover .ai-icon { transform: scale(1.07) rotate(-4deg); }

/* card text — full portfolio palette */
.ai-card h3 { font-size: var(--lg); font-weight: 700; color: var(--ink); margin-bottom: 9px; line-height: 1.3; }
.ai-card p  { font-size: var(--sm); line-height: 1.72; color: var(--muted); margin-bottom: 14px; }

/* tech-stack tags */
.ai-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-tool {
  font-size: var(--xs); font-weight: 500;
  color: var(--green);
  border: 1px solid var(--ai-brd);
  background: var(--green-lt);
  padding: 3px 9px; border-radius: 99px;
}

/* result row */
.ai-result {
  margin-top: 10px; font-size: var(--sm); font-weight: 600;
  color: var(--green); display: flex; align-items: center; gap: 5px;
}

/* ── CTA row ── */
.ai-cta-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 26px;
  border-top: 1px solid var(--ai-brd);
}
/* Reuse existing btn classes — no separate btn-ai needed */


/* ════════════════════════════════════════════════════════════
   COMPONENT: services.css
════════════════════════════════════════════════════════════ */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.svc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 22px 20px; transition: .22s; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh);
}
.svc-card:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh2); border-color: var(--green); }
.svc-card.featured { border-color: var(--green); background: var(--green-xl); }
.svc-tag {
  position: absolute; top: 13px; right: 13px; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--green); background: var(--green-lt); padding: 3px 8px; border-radius: 99px;
}
.svc-icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--green-lt); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: var(--lg);
  margin-bottom: 13px; transition: transform .22s;
}
.svc-card:hover .svc-icon { transform: scale(1.07) rotate(-3deg); }
.svc-card h3     { font-size: var(--lg); font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.svc-card p      { font-size: var(--sm); line-height: 1.68; }
.svc-result      { margin-top: 11px; font-size: var(--sm); font-weight: 600; color: var(--green); display: flex; align-items: center; gap: 6px; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: slider.css
════════════════════════════════════════════════════════════ */
.slider-overflow { overflow: hidden; border-radius: var(--r2); }
.slider-track    { display: flex; transition: transform .42s cubic-bezier(.4,0,.2,1); will-change: transform; gap: 14px; }
.slider-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 18px; }
.slider-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink2); font-size: 14px; transition: .18s; box-shadow: var(--sh); flex-shrink: 0;
}
.slider-btn:hover { background: var(--green); border-color: var(--green); color: #fff; box-shadow: var(--sh2); }
.slider-btn:disabled { opacity: .32; cursor: not-allowed; pointer-events: none; }
.slider-dots { display: flex; gap: 7px; align-items: center; }
.slider-dot  { width: 7px; height: 7px; border-radius: 50%; background: var(--line2); border: none; cursor: pointer; transition: .2s; padding: 0; }
.slider-dot.active { background: var(--green); transform: scale(1.35); }

/* project cards */
.proj-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; transition: box-shadow .2s; flex-shrink: 0; display: flex; flex-direction: column; }
.proj-card:hover { box-shadow: var(--sh2); }
.proj-card-header { padding: 20px 22px 0; display: flex; align-items: flex-start; gap: 14px; }
.proj-card-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--green-lt); display: flex; align-items: center; justify-content: center; color: var(--green); font-size: 20px; flex-shrink: 0; }
.proj-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.proj-tags span { font-size: 10px; font-weight: 700; background: var(--green-lt); color: var(--green); padding: 3px 10px; border-radius: 99px; letter-spacing: .02em; }
.proj-info { padding: 14px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.proj-info h3   { font-size: var(--lg); font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.proj-info p    { font-size: var(--sm); line-height: 1.68; color: var(--muted); }
.proj-how { margin-top: 10px; font-size: var(--sm); line-height: 1.68; color: var(--muted); border-left: 3px solid var(--green); padding-left: 10px; }
.proj-how strong { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--green); margin-bottom: 6px; }
.proj-how ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.proj-how ul li { display: flex; gap: 7px; align-items: flex-start; }
.proj-how ul li::before { content: '↳'; color: var(--green); font-weight: 700; flex-shrink: 0; line-height: 1.68; }
.case-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.case-list li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--base); line-height: 1.6; }
.case-list li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; }
.proj-result    { margin-top: 12px; font-size: var(--sm); font-weight: 600; color: var(--green); }
.proj-links     { display: flex; gap: 13px; margin-top: auto; padding-top: 14px; }
.proj-link      { font-size: var(--sm); font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; transition: .18s; }
.proj-link.pri  { color: var(--green); }
.proj-link:hover{ color: var(--ink); }

/* review cards */
.review-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r2); padding: 26px 24px; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh); }
.review-stars { color: #c07a18; margin-bottom: 12px; font-size: var(--sm); }
.review-text {
  font-size: var(--base); line-height: 1.75; color: var(--ink2); margin-bottom: 18px;
  font-style: italic; position: relative; padding-left: 18px;
}
.review-text::before { content: '\201C'; position: absolute; left: 0; top: -4px; font-family: var(--font-display); font-size: var(--2xl); line-height: 1; color: var(--green-lt); font-style: normal; }
.review-author { display: flex; align-items: center; gap: 11px; padding-top: 14px; border-top: 1px solid var(--line); }
.r-avatar { width: 40px; height: 40px; border-radius: 10px; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--sm); flex-shrink: 0; }
.r-name   { font-weight: 700; color: var(--ink); font-size: var(--base); line-height: 1.3; }
.r-role   { font-size: var(--xs); color: var(--muted); margin-top: 2px; }
.r-role a { color: var(--green); font-weight: 600; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: case-study.css
════════════════════════════════════════════════════════════ */
.case {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green);
  border-radius: var(--r2); padding: 26px; margin-top: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh);
}
.case-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 11px; }
.case-meta span { font-size: var(--xs); font-weight: 600; background: var(--green-lt); color: var(--green); padding: 3px 9px; border-radius: 99px; }
.case h3 { font-family: var(--font-display); font-size: var(--xl); color: var(--ink); margin-bottom: 12px; }
.case-block { margin-bottom: 12px; }
.case-block .lbl { font-size: var(--xs); text-transform: uppercase; letter-spacing: .08em; color: var(--muted2); font-weight: 700; margin-bottom: 4px; }
.case-block p { font-size: var(--base); line-height: 1.68; }
.case-result { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.case-stat { padding: 0 20px 0 0; }
.case-stat + .case-stat { padding-left: 20px; border-left: 1px solid var(--line); }
.case-stat .n { font-family: var(--font-display); font-size: var(--2xl); color: var(--green); line-height: 1.1; }
.case-stat .l { font-size: var(--xs); color: var(--muted); margin-top: 3px; }
.case-quote { margin: 18px 0 0; padding: 16px 20px; background: var(--green-xl); border-left: 4px solid var(--green); border-radius: 0 var(--r) var(--r) 0; }
.case-quote p { font-size: var(--base); line-height: 1.68; color: var(--ink2); font-style: italic; margin: 0 0 8px; }
.case-quote cite { font-size: var(--xs); font-weight: 700; color: var(--green); font-style: normal; letter-spacing: .03em; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: process.css
════════════════════════════════════════════════════════════ */
.process-grid { display: flex; align-items: stretch; gap: 0; margin-top: 8px; }
.process-arrow {
  display: flex; align-items: center; justify-content: center;
  padding: 0 10px; color: var(--green); font-size: 13px; opacity: 0.5; flex-shrink: 0;
}
.process-step {
  flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 28px 22px 26px; transition: .22s; position: relative; overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh);
}
.process-step::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--green), var(--green-m)); opacity: 0; transition: opacity .22s;
}
.process-step:hover::before { opacity: 1; }
.process-step:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: var(--sh2); }
.process-header { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.process-num {
  width: 40px; height: 40px; border-radius: 10px; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: var(--base); font-weight: 700; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(20,96,61,.28);
}
.process-ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--ai-bg); color: var(--green); border: 1px solid var(--ai-brd);
  display: flex; align-items: center; justify-content: center; font-size: var(--base);
}
.process-step h4 { font-size: var(--base); font-weight: 700; color: var(--ink); margin-bottom: 8px; line-height: 1.3; }
.process-step p  { font-size: var(--sm); line-height: 1.65; color: var(--muted); }
.process-free { margin-top: 14px; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: var(--green); padding: 3px 9px; border-radius: 99px; display: inline-block; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: faq.css
════════════════════════════════════════════════════════════ */
.faq-list { display: flex; flex-direction: column; max-width: 760px; }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-bottom: 9px; }
.faq-q {
  width: 100%; background: none; border: none; text-align: left;
  padding: 18px 20px; font-weight: 600; font-size: var(--base); color: var(--ink); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 14px; line-height: 1.4; transition: color .18s;
}
.faq-q:hover { color: var(--green); }
.faq-toggle {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--green-lt); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 11px; transition: .22s;
}
.faq-item.open .faq-toggle { background: var(--green); color: #fff; transform: rotate(45deg); }
.faq-item.open .faq-q { color: var(--green); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .32s ease, padding .32s ease; padding: 0 20px; }
.faq-item.open .faq-a { max-height: 260px; padding: 0 20px 18px; }
.faq-a p { font-size: var(--sm); line-height: 1.72; color: var(--muted); padding-top: 2px; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: contact.css
════════════════════════════════════════════════════════════ */
.contact-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 22px; }
.channel-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r2); padding: 16px 15px; display: flex; align-items: center; gap: 11px; transition: .18s; }
.channel-card:hover { transform: translateY(-2px); box-shadow: var(--sh); border-color: var(--green); }
.channel-ico { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: var(--lg); flex-shrink: 0; transition: transform .22s; }
.channel-card:hover .channel-ico { transform: scale(1.08) rotate(-3deg); }
.channel-ico.email { background: var(--green-lt); color: var(--green); }
.channel-ico.wa    { background: #e6f7ed; color: #1faa55; }
.channel-ico.cal   { background: #fdf2e3; color: #c07a18; }
.channel-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 2px; }
.channel-val   { font-size: var(--sm); font-weight: 600; color: var(--ink); }
.contact-form  { background: var(--card); border: 1px solid var(--line); border-radius: var(--r3); padding: 26px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--sh); }
.form-grid     { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 13px; }
.form-group    { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: var(--sm); font-weight: 600; color: var(--ink2); }
.form-group input,
.form-group select,
.form-group textarea {
  border: 1px solid var(--ai-brd); border-radius: var(--r);
  padding: 11px 13px; background: var(--ai-bg); color: var(--ink);
  font-size: var(--base); transition: .18s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--green); background: #fff; }
.form-group input.field-error,
.form-group select.field-error,
.form-group textarea.field-error { border-color: #e53e3e; background: #fff5f5; }
.form-group input.field-error:focus,
.form-group select.field-error:focus,
.form-group textarea.field-error:focus { border-color: var(--green); background: #fff; }
.form-group textarea { resize: vertical; min-height: 110px; }
.form-note { font-size: var(--xs); color: var(--muted2); margin-top: 9px; }
.form-feedback { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 13px 16px; border-radius: var(--r); font-size: var(--sm); font-weight: 500; line-height: 1.5; }
.form-feedback[hidden] { display: none; }
.form-success { background: var(--green-lt); color: var(--green-d); border: 1px solid #b6dfc8; }
.form-success i { margin-top: 2px; flex-shrink: 0; }
.form-error { background: #fff2f2; color: #b91c1c; border: 1px solid #fca5a5; }
.form-error i { margin-top: 2px; flex-shrink: 0; }
.form-error a { color: #b91c1c; font-weight: 700; }
#cfSubmit:disabled { opacity: .65; cursor: not-allowed; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: hamburger.css
════════════════════════════════════════════════════════════ */
/* ── Mobile Top Bar ───────────────────────────────────────── */
.mobile-topbar {
  display: none;

  position: fixed; top: 0; left: 0; right: 0; z-index: 195;
  height: 62px; padding: 0 14px 0 16px;
  background: var(--card); border-bottom: 1px solid var(--line);
  align-items: center; justify-content: space-between;
  box-shadow: 0 2px 12px rgba(20,18,12,.07);
}
.mtb-left       { display: flex; flex-direction: column; gap: 3px; }
.mtb-top-row    { display: flex; align-items: center; gap: 8px; }
.mtb-name       { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.mtb-hire-tag {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, var(--green-d), var(--green-m));
  color: #fff; padding: 3px 10px; border-radius: 99px;
  font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  box-shadow: 0 2px 8px rgba(15,102,66,.30);
  white-space: nowrap; flex-shrink: 0;
}
.mtb-hire-tag i { font-size: 8px; }
.mtb-sub { font-size: 0.68rem; color: var(--muted); line-height: 1; letter-spacing: .01em; }

/* Identity group: avatar + text, left side of topbar */
.mtb-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mtb-left     { min-width: 0; }

/* Topbar avatar ring */
.mtb-avatar-ring {
  position: relative; flex-shrink: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(145deg, var(--green-m), var(--green-d));
  padding: 2px;
  box-shadow: 0 2px 10px rgba(15,102,66,.30);
}
.mtb-avatar-img {
  display: block; width: 38px; height: 38px;
  border-radius: 50%; border: 2px solid var(--card);
  background: var(--green);
  object-fit: cover; object-position: center top;
}
/* CSS fallback shown when image fails to load */
.mtb-avatar-fallback {
  display: none; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(145deg, var(--green-m), var(--green-d));
  color: #fff; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 0.82rem;
  letter-spacing: -.02em; border: 2px solid var(--card);
}

/* ── Hamburger ─────────────────────────────────────────────── */
.menu-toggle {
  display: none; position: static; z-index: auto;
  width: 44px; height: 44px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; flex-direction: column; gap: 5px;
  align-items: center; justify-content: center; transition: background .18s;
  flex-shrink: 0;
}
.menu-toggle:active { background: var(--green-lt); }
.menu-toggle span { width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: .25s; display: block; }
.menu-toggle.open { background: var(--green); }
.menu-toggle.open span { background: #fff; }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-cta { display: none; }


/* ════════════════════════════════════════════════════════════
   COMPONENT: animations.css — Scroll Reveal
════════════════════════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: none; }
.hero-h1, .hero-sub, .hero-ctas, .proof-strip { opacity: 0; transform: translateY(16px); animation: rise .72s cubic-bezier(.16,1,.3,1) forwards; }
.hero-sub   { animation-delay: .09s; }
.hero-ctas  { animation-delay: .18s; }
.proof-strip{ animation-delay: .27s; }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-h1, .hero-sub, .hero-ctas, .proof-strip { opacity: 1; transform: none; animation: none; transition: none; }
  * { scroll-behavior: auto; }
}


/* ════════════════════════════════════════════════════════════
   COMPONENT: responsive.css
════════════════════════════════════════════════════════════ */
/* ── Large screens: 1440px+ (wide laptop, external monitor) ── */
@media (min-width: 1440px) {
  .sidebar      { width: 314px; left: 22px; }
  .main-content { margin-left: 370px; margin-right: 100px; max-width: 900px; }
}

/* ── Ultra-wide: 1920px+ (LED / 4K) ──────────────────────── */
@media (min-width: 1920px) {
  :root         { --base: 1rem; --md: 1.1rem; }
  .sidebar      { width: 330px; left: 30px; }
  .main-content { margin-left: 394px; margin-right: 140px; max-width: 960px; }
  .hero-h1      { font-size: 3.2rem; }
}

@media (max-width: 1260px) { .float-nav { display: none; } .main-content { margin-right: 40px; } }
@media (max-width: 1080px) { .main-content { margin-left: 330px; margin-right: 32px; } }

@media (max-width: 860px) {
  :root { --hero: 2.15rem; --3xl: 1.85rem; }

  /* Show mobile topbar, topbar contains the hamburger */
  .mobile-topbar { display: flex; }
  .menu-toggle   { display: flex; }
  /* Show sidebar navigation menu */
  .sb-nav        { display: flex; }

  /* Push content below the 62px topbar, above the 64px bottom CTA */
  .main-content  { margin: 0; padding: 78px 16px 100px; max-width: 100%; overflow-x: hidden; }

  /* Single-column grids */
  .svc-grid, .ai-grid, .contact-channels { grid-template-columns: 1fr; }

  /* Contact form — full-width single column */
  .form-grid { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .contact-form { padding: 18px 14px; border-radius: var(--r2); }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 1rem; padding: 13px 14px; }
  .form-group label { font-size: 0.82rem; }
  .contact-channels { gap: 10px; margin-bottom: 18px; }
  .channel-card { padding: 14px 16px; min-width: 0; }
  .channel-val  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #cfSubmit     { width: 100%; }

  /* Process */
  .process-grid  { flex-direction: column; gap: 0; }
  .process-arrow { transform: rotate(90deg); padding: 4px 0; height: 28px; }

  /* AI section */
  .ai-section   { padding: 28px 18px; margin: 0; border-radius: var(--r3); }
  .ai-stats     { flex-direction: column; }
  .ai-stat-item { border-right: none; border-bottom: 1px solid var(--ai-brd); }
  .ai-stat-item:last-child { border-bottom: none; }
  .ai-cta-row   { flex-direction: column; }
  .ai-cta-row .btn { justify-content: center; }

  /* Proof strip */
  .proof-strip  { flex-direction: column; }
  .proof-item   { border-right: none; border-bottom: 1px solid var(--line); }
  .proof-item:last-child { border-bottom: none; }

  /* Fixed bottom CTA bar */
  .mobile-cta {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
    padding: 10px 14px; background: rgba(244,240,232,.97);
    backdrop-filter: blur(8px); border-top: 1px solid var(--line);
  }
  .mobile-cta .btn { width: 100%; justify-content: center; }

  /* Sidebar stays above topbar; overlay stays below topbar so hamburger remains tappable */
  .sidebar { z-index: 200; }
}

@media (max-width: 560px) {
  :root { --hero: 1.7rem; --3xl: 1.5rem; }

  .mobile-topbar   { height: 58px; }
  .mtb-name        { font-size: 0.97rem; }
  .mtb-avatar-ring { width: 38px; height: 38px; }
  .mtb-avatar-img  { width: 34px; height: 34px; }
  .mtb-avatar-fallback { width: 34px; height: 34px; }

  .main-content  { padding: 72px 12px 100px; }
  .section       { padding: 32px 0; }

  /* Hero */
  .hero-ctas { flex-direction: row; flex-wrap: wrap; }
  .hero-ctas .btn { justify-content: center; }

  /* Highlights chips — wrap cleanly */
  .about-highlights { gap: 7px; }

  /* Sliders */
  .slider-btn { width: 36px; height: 36px; }

  /* Case study */
  .case-result { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .case-stat + .case-stat { border-left: none; padding-left: 0; }
  .case-quote  { margin-top: 14px; }
  .case        { padding: 20px 16px; }
  .case-list   { padding-left: 16px; }

  /* About */
  .about-actions { flex-direction: column; }
  .about-actions .btn { justify-content: center; }

  /* Process */
  .process-step { padding: 22px 16px 20px; }

  /* Contact */
  .contact-form { padding: 16px 12px; }
  .form-group input,
  .form-group select,
  .form-group textarea { font-size: 0.95rem; }
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — SHORT SCREENS
   Compact the sidebar so it fits without scrolling on laptops
   with small vertical resolution (13" MacBook, 768px screens,
   landscape phones).
════════════════════════════════════════════════════════════ */

/* Step 1: slightly shrink avatar at 760px tall */
@media (max-height: 760px) and (min-width: 861px) {
  .sidebar         { padding: 18px 20px 16px; }
  .sb-divider      { margin: 8px 0; }
  .sb-profile      { gap: 7px; }
  .sb-avatar-ring  { width: 90px; height: 90px; }
  .sb-avatar-img   { width: 84px; height: 84px; }
  .sb-avatar-fallback { width: 84px; height: 84px; font-size: var(--xl); }
  .sb-name         { font-size: var(--lg); }
  .sb-contact-item { padding: 8px 0; font-size: var(--sm); }
}

/* Step 2: shrink further at 680px tall */
@media (max-height: 680px) and (min-width: 861px) {
  .sidebar         { padding: 14px 18px 14px; overflow-y: auto; }
  .sb-profile      { gap: 5px; }
  .sb-avatar-ring  { width: 76px; height: 76px; }
  .sb-avatar-img   { width: 70px; height: 70px; }
  .sb-avatar-fallback { width: 70px; height: 70px; font-size: var(--lg); }
  .sb-name         { font-size: var(--md); }
  .sb-title        { font-size: 0.68rem; }
  .sb-contact-item { padding: 6px 0; font-size: var(--xs); }
  .sb-ctas         { gap: 6px; padding-top: 8px; }
  .btn             { padding: 10px 16px; }
}

/* Step 3: only hide title on truly tiny viewport heights */
@media (max-height: 520px) and (min-width: 861px) {
  .sb-title { display: none; }
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — TABLETS (640px – 860px)
   Sidebar is hidden; full width available.
   Restore multi-column layouts that were collapsed for mobile.
════════════════════════════════════════════════════════════ */
@media (min-width: 640px) and (max-width: 860px) {
  /* 2-column service and AI grids */
  .svc-grid         { grid-template-columns: repeat(2, 1fr); }
  .ai-grid          { grid-template-columns: repeat(2, 1fr); }

  /* Contact channels — 2 columns (only 2 items exist) */
  .contact-channels { grid-template-columns: repeat(2, 1fr); }

  /* Proof strip — back to horizontal row */
  .proof-strip      { flex-direction: row; }
  .proof-item       { border-right: 1px solid var(--line); border-bottom: none; }
  .proof-item:last-child { border-right: none; }

  /* AI stats — back to horizontal */
  .ai-stats         { flex-direction: row; }
  .ai-stat-item     { border-bottom: none; border-right: 1px solid var(--ai-brd); }
  .ai-stat-item:last-child { border-right: none; }

  /* Process — back to horizontal row */
  .process-grid     { flex-direction: row; align-items: stretch; }
  .process-arrow    { transform: none; height: auto; padding: 0 8px; }
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — LARGE PHONES (481px – 639px)
════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  :root            { --hero: 1.75rem; }
  .hero-ctas       { flex-direction: column; }
  .hero-ctas .btn  { width: 100%; justify-content: center; }
  .svc-card        { padding: 18px 16px; }
  .svc-icon        { width: 40px; height: 40px; font-size: 18px; }
  .ai-card         { padding: 20px 16px; }
  .proj-card-header { padding: 16px 16px 0; }
  .proj-info        { padding: 14px 16px; }
  .process-step    { padding: 20px 14px; }
  .section-title   { font-size: var(--2xl); }
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL PHONES (max-width: 380px)
   iPhone SE 3rd gen, iPhone mini, small Android devices
════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {
  :root            { --hero: 1.5rem; --3xl: 1.35rem; --2xl: 1.55rem; }
  .main-content    { padding: 68px 10px 96px; }
  .section         { padding: 26px 0; }
  .mobile-topbar   { height: 54px; padding: 0 12px; }
  .mtb-name        { font-size: 0.9rem; }
  .mtb-sub         { font-size: 0.62rem; }
  .menu-toggle     { width: 38px; height: 38px; }
  .mtb-avatar-ring { width: 34px; height: 34px; }
  .mtb-avatar-img  { width: 30px; height: 30px; }
  .mtb-avatar-fallback { width: 30px; height: 30px; font-size: 0.72rem; }
  .proof-num       { font-size: var(--xl); }
  .btn             { padding: 11px 16px; font-size: 0.84rem; }
  .case            { padding: 16px 12px; }
  .case-result     { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .case-stat + .case-stat { border-left: none; padding-left: 0; }
  .review-card     { padding: 18px 14px; }
  .faq-q           { padding: 14px 14px; font-size: var(--sm); }
  .section-title   { font-size: var(--xl); }
  .section-lead    { font-size: var(--base); }
  .hero-sub        { font-size: var(--base); }
  .about-highlights { gap: 6px; }
  .hl-chip         { font-size: 0.72rem; padding: 5px 10px; }
}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE — VERY SMALL PHONES (max-width: 320px)
   iPhone SE 1st gen, small Android budget phones
════════════════════════════════════════════════════════════ */
@media (max-width: 320px) {
  :root            { --hero: 1.32rem; --3xl: 1.2rem; }
  .main-content    { padding: 62px 8px 90px; }
  .hero-h1         { letter-spacing: -.015em; }
  .section-title   { letter-spacing: -.01em; }
  .proof-num       { font-size: var(--lg); }
  .slider-btn      { width: 32px; height: 32px; }
  .pill            { font-size: 0.62rem; }
  .btn             { padding: 10px 14px; font-size: 0.8rem; }
  .mobile-topbar   { padding: 0 10px; }
  .mtb-avatar-ring { width: 30px; height: 30px; }
  .mtb-avatar-img  { width: 26px; height: 26px; }
  .mtb-avatar-fallback { width: 26px; height: 26px; font-size: 0.65rem; }
  .mtb-identity    { gap: 8px; }
}

/* ════════════════════════════════════════════════════════════
   COMPONENT: service-pages — Specialist service / hub pages
   (added 2026-06 — hub-and-spoke architecture)
════════════════════════════════════════════════════════════ */
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:var(--sm); color:var(--muted); margin-bottom:14px; }
.breadcrumb a { color:var(--green); font-weight:600; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb i { font-size:9px; color:var(--muted2); }
.breadcrumb span { color:var(--muted2); }

.svc-answer {
  background: var(--green-xl);
  border: 1px solid var(--ai-brd);
  border-left: 4px solid var(--green);
  border-radius: var(--r2);
  padding: 20px 22px;
  font-size: var(--md);
  line-height: 1.74;
  color: var(--ink2);
  margin: 4px 0 2px;
}

.steps { list-style:none; display:grid; gap:14px; counter-reset: step; margin-top:6px; max-width:640px; }
.steps li { position:relative; padding-left:54px; font-size:var(--sm); color:var(--muted); line-height:1.7; min-height:36px; }
.steps li::before {
  counter-increment: step; content: counter(step);
  position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%;
  background: var(--green); color:#fff; font-weight:700; font-size:0.95rem;
  display:flex; align-items:center; justify-content:center;
}
.steps li strong { display:block; color:var(--ink); font-weight:700; margin-bottom:1px; }

.svc-more { margin-top:24px; display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; font-size:var(--sm); }
.svc-more-label { font-weight:700; color:var(--ink); }
.svc-more a { color:var(--green); font-weight:600; }
.svc-more a:hover { text-decoration:underline; }
.svc-more .svc-more-all { color:var(--ink2); }

.svc-hub-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px; margin-top:6px; }
.svc-hub-card { display:block; background:var(--card); border:1px solid var(--line); border-radius:var(--r2); padding:24px; box-shadow:var(--sh); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.svc-hub-card:hover { transform:translateY(-3px); box-shadow:var(--sh2); border-color:var(--ai-brd); }
.svc-hub-ico { width:46px; height:46px; border-radius:12px; background:var(--green-lt); color:var(--green); display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:14px; }
.svc-hub-card h3 { font-family:var(--font-display); color:var(--ink); font-size:var(--xl); line-height:1.25; margin-bottom:8px; }
.svc-hub-card p { font-size:var(--sm); color:var(--muted); line-height:1.7; }
.svc-hub-more { display:inline-block; margin-top:12px; color:var(--green); font-weight:600; font-size:var(--sm); }

.page-cta { background:var(--green); color:#fff; border-radius:var(--r3); padding:40px 30px; text-align:center; box-shadow:var(--sh2); }
.page-cta h2 { font-family:var(--font-display); font-size:var(--2xl); color:#fff; margin-bottom:10px; line-height:1.2; }
.page-cta p { color:rgba(255,255,255,.86); max-width:560px; margin:0 auto 20px; font-size:var(--md); }
.page-cta .btn-primary { background:#fff; color:var(--green); }
.page-cta .btn-primary:hover { background:#f3f3f3; }
.page-cta .btn-outline { border-color:rgba(255,255,255,.55); color:#fff; background:transparent; }
.page-cta .btn-outline:hover { border-color:#fff; background:rgba(255,255,255,.1); color:#fff; }