@font-face {
  font-family: 'General Sans';
  src: url('/project/fonts/GeneralSans-Variable.woff2') format('woff2-variations'),
       url('/project/fonts/GeneralSans-Variable.woff')  format('woff-variations');
  font-weight: 200 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('/project/fonts/GeneralSans-VariableItalic.woff2') format('woff2-variations');
  font-weight: 200 700; font-style: italic; font-display: swap;
}
@font-face { font-family: 'General Sans'; font-weight: 200; font-style: normal;
  src: url('/project/fonts/GeneralSans-Extralight.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'General Sans'; font-weight: 300; font-style: normal;
  src: url('/project/fonts/GeneralSans-Light.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'General Sans'; font-weight: 400; font-style: normal;
  src: url('/project/fonts/GeneralSans-Regular.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'General Sans'; font-weight: 500; font-style: normal;
  src: url('/project/fonts/GeneralSans-Medium.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'General Sans'; font-weight: 600; font-style: normal;
  src: url('/project/fonts/GeneralSans-Semibold.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'General Sans'; font-weight: 700; font-style: normal;
  src: url('/project/fonts/GeneralSans-Bold.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'General Sans'; font-weight: 400; font-style: italic;
  src: url('/project/fonts/GeneralSans-Italic.woff2') format('woff2'); font-display: swap; }

:root {
  --toco-black:        #000000;
  --toco-cloud-gray:   #f6f5f3;
  --toco-azure:        #2f5d8a;
  --toco-dark-gray:    #545454;
  --toco-gray:         #737373;
  --toco-muted-green:  #4f6f64;
  --toco-black-soft:   #0a0a0a;
  --toco-cloud-alt:    #ebeae7;
  --toco-azure-tint:   #aed9ff;
  --toco-azure-deep:   #1f4566;
  --toco-border-dark:  rgba(10,10,10,0.15);
  --toco-border-light: rgba(255,255,255,0.30);
  --toco-border-hair:  rgba(10,10,10,0.08);
  --bg1: var(--toco-cloud-gray);
  --bg2: #ffffff;
  --bg3: var(--toco-cloud-alt);
  --bg-dark: var(--toco-black);
  --fg1: var(--toco-black);
  --fg2: var(--toco-dark-gray);
  --fg3: var(--toco-gray);
  --fg-inv: var(--toco-cloud-gray);
  --fg-inv-2: rgba(246,245,243,0.7);
  --fg-inv-3: rgba(246,245,243,0.5);
  --accent: var(--toco-azure);
  --accent-hover: var(--toco-azure-deep);
  --br1: var(--toco-border-dark);
  --br2: var(--toco-border-hair);
  --font-sans: 'General Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --weight-light: 300; --weight-regular: 400; --weight-medium: 500;
  --weight-semi: 600;  --weight-bold: 700;
  --t-hxxl: clamp(48px, 5.05vw, 96.96px);
  --t-hxl:  clamp(36px, 3.75vw, 72px);
  --t-hlg:  clamp(32px, 2.92vw, 56px);
  --t-hmd:  clamp(28px, 2.5vw, 48px);
  --t-hsm:  clamp(24px, 2.08vw, 40px);
  --t-hxs:  clamp(20px, 1.67vw, 32px);
  --t-hxxs: clamp(18px, 1.25vw, 24px);
  --t-pre:  clamp(14px, 0.83vw, 16px);
  --t-bxl:  clamp(18px, 1.25vw, 24px);
  --t-blg:  clamp(16px, 1.15vw, 22px);
  --t-bmd:  clamp(15px, 0.94vw, 18px);
  --t-bsm:  clamp(14px, 0.83vw, 16px);
  --lh-tight: 1; --lh-snug: 1.1; --lh-normal: 1.3; --lh-relaxed: 1.5;
  --track-tight: -0.02em; --track-snug: -0.01em; --track-normal: 0; --track-wide: 0.06em;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:30px; --space-7:40px; --space-8:60px;
  --space-9:80px; --space-10:128px;
  --page-margin:   clamp(20px, 5vw, 80px);
  --section-pad-y: clamp(40px, 4vw, 128px);
  --max-content:   1920px;
  --max-prose:     720px;
  --nav-h:         72px;
  --r-sm: 4px; --r-md: 12px; --r-lg: 40px; --r-pill: 1000px;
  --shadow-0: none;
  --shadow-1: 0 1px 4px rgba(10,10,10,0.08);
  --shadow-2: 0 8px 32px -8px rgba(10,10,10,0.14), 0 2px 8px rgba(10,10,10,0.06);
  --shadow-3: 0 24px 48px -12px rgba(10,10,10,0.18), 0 8px 16px -8px rgba(10,10,10,0.08);
  --shadow-focus: 0 0 0 3px rgba(47,93,138,0.35);
  --ease: cubic-bezier(0.29, 0.48, 0.5, 0.99);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-xs: 100ms; --dur-sm: 150ms; --dur-md: 300ms; --dur-lg: 600ms;
}

*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font-family: var(--font-sans); font-weight: var(--weight-regular); font-size: inherit; -webkit-font-smoothing: antialiased; }
html {
  font-family: var(--font-sans); color: var(--fg1); background: var(--bg1);
  font-feature-settings: "ss01","ss02";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}
body { margin: 0; font-size: var(--t-bmd); line-height: var(--lh-relaxed); font-weight: var(--weight-regular); }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-sans); font-weight: var(--weight-semi);
  letter-spacing: var(--track-tight); line-height: var(--lh-snug);
  text-wrap: balance; margin: 0; color: var(--fg1);
}
h1 { font-size: var(--t-hxl); line-height: var(--lh-tight); }
h2 { font-size: var(--t-hlg); }
h3 { font-size: var(--t-hmd); }
p  { margin: 0 0 var(--space-4); max-width: var(--max-prose); text-wrap: pretty; }
a  { color: var(--accent); text-decoration: none; text-underline-offset: 3px;
     transition: color var(--dur-sm) var(--ease); }
a:hover { color: var(--accent-hover); text-decoration: underline; }

/* ── PAGE TRANSITIONS ───────────────────────────────────────── */
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: pageFadeIn 0.4s var(--ease) both; }

/* ── BLOG ARTICLE BODY ──────────────────────────────────────── */
.blog-article { font-size: clamp(17px,1.15vw,20px); line-height: 1.75; color: var(--fg2); }
.blog-article p { margin: 0 0 1.5em; max-width: none; }
.blog-article p:first-child { font-size: clamp(18px,1.25vw,22px); color: var(--fg1); line-height: 1.65; }
.blog-article h2 { font-size: clamp(22px,1.7vw,30px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 2.8em 0 0.8em; color: var(--fg1); }
.blog-article h3 { font-size: clamp(18px,1.3vw,24px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; margin: 2em 0 0.6em; color: var(--fg1); }
.blog-article ul, .blog-article ol { margin: 0 0 1.6em; padding-left: 1.5em; }
.blog-article li { margin-bottom: 0.75em; line-height: 1.65; }
.blog-article strong { color: var(--fg1); font-weight: 600; }
.blog-article a { color: var(--toco-azure); text-decoration: underline; text-underline-offset: 3px; }
.blog-article a:hover { color: var(--accent-hover); }
.blog-article blockquote { border-left: 3px solid var(--toco-azure); margin: 2em 0; padding: 1em 0 1em 1.5em; color: var(--fg1); font-size: clamp(18px,1.3vw,23px); font-weight: 400; letter-spacing: -0.01em; line-height: 1.5; }
.blog-article hr { border: none; border-top: 1px solid var(--br1); margin: 2.5em 0; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
/* Mobile hamburger toggle — hidden by default */
.nav-hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; color: inherit; }
.nav-mobile-menu {
  position: fixed; inset: 0; z-index: 99;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 36px;
  background: var(--toco-black); color: var(--toco-cloud-gray);
  animation: pageFadeIn 0.25s var(--ease) both;
}
.nav-mobile-menu a, .nav-mobile-menu button {
  font-size: clamp(32px,8vw,56px); font-weight: 300; letter-spacing: -0.025em;
  color: var(--toco-cloud-gray); text-decoration: none; background: none; border: none;
  cursor: pointer; font-family: var(--font-sans); opacity: 0.9;
}
.nav-mobile-menu a:hover, .nav-mobile-menu button:hover { opacity: 1; }
.nav-mobile-close {
  position: absolute; top: 24px; right: 24px;
  background: none; border: none; cursor: pointer; color: var(--toco-cloud-gray); padding: 8px;
}

/* Span overrides for 12-col grids on smaller screens */
@media (max-width: 1023px) {
  .col-span-4  { grid-column: span 6 !important; }
  .col-span-8  { grid-column: span 12 !important; }
  .col-span-7  { grid-column: span 12 !important; }
  .col-span-5  { grid-column: span 12 !important; }
}
@media (max-width: 767px) {
  /* Nav — collapse to hamburger */
  .nav-center-links { display: none !important; }
  .nav-contact-btn  { display: none !important; }
  .nav-hamburger    { display: flex !important; align-items: center; justify-content: center; }
  .nav-grid         { grid-template-columns: 1fr 1fr !important; }

  /* Footer columns — 2-col on mobile */
  .toco-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 40px 24px !important; }

  /* All 12-col grid items collapse to full width */
  .col-span-4  { grid-column: span 12 !important; }
  .col-span-6  { grid-column: span 12 !important; }

  /* Two-column side-by-side layouts stack */
  .stack-mobile { grid-template-columns: 1fr !important; }
  .stack-mobile > * { order: unset !important; }

  /* Testimonial rows stack, image goes on top */
  .toco-testimonial-row { grid-template-columns: 1fr !important; }
  .toco-testimonial-row > div:first-child { order: 0 !important; }
  .toco-testimonial-row > div:last-child  { order: 1 !important; }
  .toco-testimonial-img { aspect-ratio: 16/7 !important; min-height: unset !important; }

  /* Stats strip single column */
  .stats-strip { grid-template-columns: 1fr 1fr !important; }

  /* Blog post two-col layout */
  .blog-layout { grid-template-columns: 1fr !important; gap: 32px !important; }
  .blog-layout > *:first-child { display: none; } /* hide sidebar on mobile */

  /* Services page — hide sticky left nav, go single column */
  .services-layout { grid-template-columns: 1fr !important; }
  .services-layout > div:first-child { display: none !important; }

  /* Blog back button — show on mobile only */
  .blog-back-mobile { display: inline-flex !important; }

  /* Services overview home section */
  .services-overview-grid { grid-template-columns: 1fr !important; }
  .services-overview-grid > * { grid-column: span 1 !important; }

  /* Hero bottom bar — always visible on mobile */
  .hero-scroll-hint { display: block !important; }

  /* Pricing / engagement models — stack vertically */
  .pricing-cols { grid-template-columns: 1fr !important; }
  .pricing-cols > div > div { border-right: none !important; border-bottom: 1px solid var(--br1); padding-left: 0 !important; }
}
@media (max-width: 480px) {
  .toco-footer-grid { grid-template-columns: 1fr !important; }
  .stats-strip { grid-template-columns: 1fr 1fr !important; }
}
/* Insight/work card grids — auto-fit so they reflow naturally */
@media (max-width: 767px) {
  .toco-case-grid  { grid-template-columns: 1fr !important; }
  .blog-layout > *:first-child { display: none !important; }
}

/* ── HERO STAGGER ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-el { opacity: 0; animation: fadeUp 0.9s var(--ease) both; }
.hero-el-1 { animation-delay: 0.15s; }
.hero-el-2 { animation-delay: 0.35s; }
.hero-el-3 { animation-delay: 0.55s; }
.hero-el-4 { animation-delay: 0.72s; }

/* ── SCROLL REVEAL ──────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px);
  transition: opacity 0.65s var(--ease), transform 0.65s var(--ease); }
.reveal.revealed { opacity: 1; transform: translateY(0); }

/* ── BUTTONS ────────────────────────────────────────────────── */
.toco-btn {
  position: relative; overflow: hidden;
  transition: transform var(--dur-sm) var(--ease), box-shadow var(--dur-sm) var(--ease),
              background var(--dur-sm) var(--ease), color var(--dur-sm) var(--ease),
              border-color var(--dur-sm) var(--ease);
}
.toco-btn::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0.08); opacity: 0;
  transition: opacity var(--dur-sm) var(--ease);
}
.toco-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.toco-btn:hover::after { opacity: 1; }
.toco-btn:active { transform: scale(0.97) translateY(0) !important; box-shadow: none !important; }

/* ── NAV LINK HOVER ─────────────────────────────────────────── */
.nav-link { position: relative; text-decoration: none !important; }
.nav-link::after {
  content: ''; position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 220ms var(--ease);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── CARDS ──────────────────────────────────────────────────── */
.toco-card {
  transition: transform var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);
}
.toco-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }

.toco-case-card { transition: transform var(--dur-md) var(--ease); cursor: pointer; }
.toco-case-card:hover { transform: translateY(-5px); }
.toco-case-card .case-thumb {
  overflow: hidden; transition: box-shadow var(--dur-md) var(--ease);
}
.toco-case-card:hover .case-thumb { box-shadow: var(--shadow-3); }
.toco-case-card .case-thumb-inner {
  width: 100%; height: 100%;
  transition: transform 0.55s var(--ease);
}
.toco-case-card:hover .case-thumb-inner { transform: scale(1.04); }

/* ── TESTIMONIAL ────────────────────────────────────────────── */
.toco-testimonial-img {
  transition: transform 0.5s var(--ease);
}
.toco-testimonial-row:hover .toco-testimonial-img { transform: scale(1.02); }

/* ── SERVICES SIDEBAR ───────────────────────────────────────── */
.svc-cat {
  display: block; width: 100%; text-align: left; background: none; border: none;
  cursor: pointer; font-family: var(--font-sans); padding: 14px 0;
  font-size: clamp(22px, 2.2vw, 36px); letter-spacing: -0.02em; line-height: 1.15;
  transition: color 250ms var(--ease), font-weight 250ms var(--ease), transform 200ms var(--ease);
  position: relative;
}
.svc-cat::before {
  content: ''; position: absolute; left: -20px; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 60%; background: var(--toco-azure); border-radius: 2px;
  transition: transform 250ms var(--ease);
}
.svc-cat.active { color: var(--toco-azure); font-weight: 600; }
.svc-cat.active::before { transform: translateY(-50%) scaleY(1); }
.svc-cat.inactive { color: rgba(0,0,0,0.25); font-weight: 300; }
.svc-cat.inactive:hover { color: rgba(0,0,0,0.55); transform: translateX(4px); }

/* ── FOOTER TAGLINE FADE ────────────────────────────────────── */
@keyframes taglineFade { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
.footer-tagline { animation: taglineFade 0.8s var(--ease) 0.2s both; }

/* ── FOCUS ──────────────────────────────────────────────────── */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--toco-azure); outline-offset: 2px;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--toco-azure) !important;
  box-shadow: 0 0 0 3px rgba(47,93,138,.22);
}

/* ── COUNT-UP ───────────────────────────────────────────────── */
@keyframes statSlideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.stat-num { display: inline-block; }
.stat-num.animated { animation: statSlideUp 0.5s var(--ease) both; }

/* ── LINK ARROW NUDGE ───────────────────────────────────────── */
.arrow-link { display: inline-flex; align-items: center; gap: 8px; transition: gap 200ms var(--ease); }
.arrow-link:hover { gap: 14px; text-decoration: none !important; }

/* ── CUSTOM CURSOR ──────────────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }
  a, button, [role="button"], input, select, textarea, label { cursor: none; }
  #toco-cursor {
    position: fixed; top: 0; left: 0; width: 14px; height: 14px;
    border-radius: 50%; background: #fff; pointer-events: none;
    z-index: 99999; transform: translate(-50%, -50%);
    transition: transform 80ms linear, opacity 200ms ease, width 200ms var(--ease), height 200ms var(--ease), background 200ms ease;
    mix-blend-mode: difference;
  }
  #toco-cursor.hovering { width: 32px; height: 32px; }
  #toco-cursor.clicking { transform: translate(-50%, -50%) scale(0.7); }
}
@media (hover: none) {
  #toco-cursor { display: none !important; }
}

/* ── COOKIE BANNER ──────────────────────────────────────────── */
#toco-cookie {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--toco-black); color: var(--toco-cloud-gray);
  padding: 20px 28px; display: flex; align-items: center; gap: 24px;
  font-size: 13px; line-height: 1.5; z-index: 9999;
  border: 1px solid rgba(255,255,255,0.12); max-width: 680px; width: calc(100% - 48px);
  animation: cookieSlide 0.4s var(--ease) 1.2s both;
}
@keyframes cookieSlide { from { opacity:0; transform: translateX(-50%) translateY(20px); } to { opacity:1; transform: translateX(-50%) translateY(0); } }
#toco-cookie button {
  background: var(--toco-cloud-gray); color: var(--toco-black);
  border: none; padding: 10px 20px; font-family: var(--font-sans);
  font-size: 12px; font-weight: 600; cursor: none; white-space: nowrap;
  letter-spacing: 0.04em; flex-shrink: 0;
}

/* ── FAQ ACCORDION ──────────────────────────────────────────── */
.faq-item { border-bottom: 1px solid var(--toco-border-dark); }
.faq-trigger {
  width: 100%; background: none; border: none; text-align: left;
  padding: 28px 0; cursor: none; display: flex; justify-content: space-between;
  align-items: center; gap: 24px;
  font: inherit; font-family: var(--font-sans);
  font-size: clamp(16px,1.2vw,20px); font-weight: 400; color: var(--fg1);
  letter-spacing: -0.01em; transition: color 150ms var(--ease);
}
.faq-trigger:hover { color: var(--toco-azure); }
.faq-icon { flex-shrink: 0; transition: transform 300ms var(--ease); }
.faq-icon.open { transform: rotate(45deg); }
.faq-body { overflow: hidden; transition: max-height 350ms var(--ease), opacity 300ms ease; max-height: 0; opacity: 0; }
.faq-body.open { opacity: 1; }