/* RESPONSIVE — all @media breakpoints, plus the print/PDF export layout */

/* RESPONSIVE */
@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; gap:56px; }
  .hero-content { max-width:640px; }
  .hero-visual { height:610px; justify-content:center; }
  .hero-carousel-wrap { width:min(560px,68vw); }
  .hero-carousel-card { height:clamp(390px,53vh,520px); }
  .split, .card-grid-2, .card-grid-3, .card-grid-4, .quarter-grid, .cta-grid { grid-template-columns:repeat(2,1fr); }
  .process-grid { grid-template-columns:repeat(3,1fr); }
  .footer-top { grid-template-columns: 1fr auto; row-gap: 40px; }
  .footer-illustration { grid-column: 1 / -1; justify-content: center; }
}
/* the nav switches to the hamburger well above the general tablet
   breakpoint below — 7 links plus a CTA need more room than a 768-1024px
   viewport gives them before "Case Studies" wraps and the CTA clips */
@media (max-width:1100px) {
  .nav-links { display:none; }
  .nav-links.open {
    display:flex; flex-direction:column; position:fixed;
    top:80px; left:16px; right:16px;
    background:var(--white); border-radius:var(--radius-sm);
    padding:24px; box-shadow:var(--shadow-lg); gap:18px;
  }
  .nav-actions { display:none; }
  .nav-links.open .nav-cta-item-mobile { display:block; }
  .nav-links.open .nav-cta { display:inline-flex; width:100%; justify-content:center; }
  .menu-toggle { display:flex; }
}
@media (max-width:768px) {
  .hero { min-height:auto; padding:112px 20px 56px; }
  .hero-visual { height:401px; margin-top:8px; }
  .hero-carousel-wrap { width:min(401px,78vw); }
  .hero-carousel-card { height:clamp(330px,50vh,443px); }
  .hero-trust { gap:10px 20px; }
  .split, .card-grid-2, .card-grid-3, .card-grid-4, .quarter-grid, .cta-grid, .process-grid, .why-grid { grid-template-columns:1fr; }
  .outcomes { grid-template-columns:1fr; }
  .oc-item:nth-child(odd) { border-right:none; }
  .contact-grid { grid-template-columns:1fr 1fr; }
  .site-footer { padding: 24px 20px 16px; }
  .footer-top { grid-template-columns: 1fr; justify-items: center; gap: 20px; }
  .footer-logo { justify-self: center; }
  .footer-logo .logo-img { max-width: 150px; }
  /* nav links and contact info sit side by side instead of stacking full-width
     and centered — that centered-column layout left large empty margins on
     both sides at phone widths, which this reclaims. */
  .footer-links { flex-direction: row; justify-content: center; gap: 24px; width: 100%; text-align: left; }
  .footer-nav-col { gap: 10px; }
  .footer-nav-col a { white-space: nowrap; }
  .footer-illustration { justify-self: center; justify-content: center; }
  .footer-illustration img { max-width: 240px; }
  .footer-divider { margin: 16px -20px 12px; }
  .footer-bottom { margin-left: -20px; margin-right: -20px; }
  section { padding:56px 20px; }
}
@media (max-width:480px) {
  .hero-visual { height:330px; }
  .hero-carousel-card { height:clamp(295px,47vh,372px); }
  .hero-cta { flex-direction:column; align-items:stretch; }
  .hero-cta .btn { justify-content:center; }
}

@media (max-width: 768px) {
  .page-main section { padding: 48px 20px 64px; }
}

@media (max-width: 1024px) {
  .contact-hero-illus { max-width: 300px; max-height: 300px; }
  .contact-hero-wrap { gap: 28px; }
  .contact-hero-text .section-desc { max-width: 100%; }
}
@media (max-width: 900px) {
  .contact-hero-wrap { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .contact-hero-text { max-width: 100%; padding-top: 0; }
  .contact-hero-text .section-desc { max-width: 100%; }
  .contact-hero-visual { justify-content: flex-start; }
  .contact-hero-illus { max-width: 260px; max-height: 260px; }
  .contact-layout { grid-template-columns: 1fr; }
  .contact-bg-accent { display: none; }
}
@media (max-width: 600px) {
  .page-main .contact-page { padding-top: 40px; }
  .contact-form { padding: 22px 18px 24px; }
  .contact-panel { padding: 22px 18px 20px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .social-row { flex-direction: column; gap: 8px; }
  .contact-hero-wrap { margin-bottom: 24px; }
  .contact-hero-illus { max-width: 220px; max-height: 220px; }
  .form-eyebrow { margin-bottom: 16px; padding-bottom: 12px; }
}

@media (max-width: 1024px) {
  .about-intro, .problem-layout { grid-template-columns: 1fr; }
  .problem-stat, .problem-visual { position: static; }
  .vm-vision, .vm-mission { grid-column: span 12; }
  .values-row { grid-template-columns: repeat(2, 1fr); }
  .why-bento { grid-template-columns: repeat(2, 1fr); }
  .why-feature { grid-column: span 2; grid-row: span 1; min-height: 220px; }
}
@media (max-width: 768px) {
  .about-pillars, .values-row, .why-bento { grid-template-columns: 1fr; }
  .why-feature { grid-column: span 1; }
  .foundation-bento { grid-template-columns: 1fr; }
  .vm-vision, .vm-mission, .values-row { grid-column: span 1; }
}

@media (max-width: 1024px) {
  .services-bento .svc-tile { grid-column: span 6 !important; }
  .adv-layout { grid-template-columns: 1fr; }
  .adv-stat { position: static; }
  .benefits-track { grid-template-columns: repeat(2, 1fr); }
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .services-bento .svc-tile { grid-column: span 12 !important; }
  .adv-grid, .benefits-track, .clients-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .process-bento .proc-step { grid-column: span 6 !important; }
  .proc-step.s4 { grid-column: span 12 !important; }
  .metrics-layout { grid-template-columns: 1fr; }
  .metrics-stat { position: static; }
  .growth-timeline { grid-template-columns: repeat(2, 1fr); }
  .growth-q-arrow { display: none; }
}
@media (max-width: 768px) {
  .process-bento .proc-step { grid-column: span 12 !important; }
  .metrics-grid, .growth-timeline { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .cs-index { grid-template-columns: 1fr; max-width: 420px; }
  .cs-case-layout,
  .cs-case-layout-reverse {
    grid-template-columns: 1fr; direction: ltr; gap: 36px;
  }
}
@media (max-width: 600px) {
  .cs-hero, .cs-case-head, .cs-cta { padding-left: 20px; padding-right: 20px; }
  .cs-case-layout { padding-top: 32px; padding-bottom: 32px; }
  .cs-results-bento { grid-template-columns: repeat(2, 1fr); }
  .cs-bento-hero { grid-column: span 2; grid-row: span 1; }
  .cs-bento-graphic { display: none; }
  .cs-bento-hero { flex-direction: column; align-items: flex-start; text-align: left; }
  .cs-bento-hero-graphic { margin-top: 16px; width: 64px; height: 64px; }
  .cs-quote { padding: 32px 24px; margin-top: 16px; margin-bottom: 48px; }
}

@media (max-width: 768px) {
  .mark-illus-row { grid-template-columns: 1fr; }
  .mark-illus-row.reverse .mark-illus-wrap { order: 0; }
}

@media (max-width: 1024px) {
  .home-svc-grid { grid-template-columns: repeat(2, 1fr); }
  .home-split { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .home-band, .home-cta-band { padding: 56px 20px; }
  .home-svc-grid, .home-case-row { grid-template-columns: 1fr; }
  .home-band-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .home-step {
    padding: 16px 20px;
    gap: 16px;
  }
  .home-step-num-wrap {
    width: 36px;
    height: 36px;
  }
  .home-step-num {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
  .process-line-wrap {
    left: 38px; /* 20px left padding + 18px half-width */
    top: 34px;  /* 16px top padding + 18px half-height */
    bottom: 34px; /* 16px bottom padding + 18px half-height */
  }
}

/* PRINT / PDF — full desktop width, one continuous page per site page */
html.pdf-export {
  width: 1440px;
}

html.pdf-export body {
  width: 1440px;
  max-width: 1440px;
  min-width: 1440px;
  overflow: visible;
}

html.pdf-export .nav {
  display: none !important;
}

html.pdf-export footer {
  display: none !important;
}



html.pdf-export .home-cta-band {
  display: none !important;
}

html.pdf-export .contact-form {
  display: none !important;
}

html.pdf-export .contact-layout {
  grid-template-columns: 1fr !important;
}

html.pdf-export a[href] {
  color: inherit;
  text-decoration: none;
}

html.pdf-export .pdf-site-bar {
  padding: 14px 32px;
  background: var(--purple-lt);
  border-bottom: 1px solid rgba(103, 58, 183, 0.12);
  text-align: center;
}

html.pdf-export .pdf-site-bar a {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: inherit;
  text-decoration: none;
}

html.pdf-export .hero {
  padding: 32px 32px 48px !important;
}

html.pdf-export .hero-headline {
  margin-bottom: 0 !important;
}

html.pdf-export .hero-cta {
  margin-bottom: 28px !important;
}

html.pdf-export .pillars {
  margin-bottom: 16px !important;
}

html.pdf-export .b-hero {
  min-height: 260px !important;
}

html.pdf-export .b-pill,
html.pdf-export .pill-card {
  min-height: 220px !important;
}

html.pdf-export .bento,
html.pdf-export .services-bento,
html.pdf-export .process-bento,
html.pdf-export .foundation-bento,
html.pdf-export .home-svc-grid,
html.pdf-export .home-case-row,
html.pdf-export .why-bento,
html.pdf-export .benefits-track,
html.pdf-export .clients-grid,
html.pdf-export .cs-results-bento,
html.pdf-export .home-process-steps,
html.pdf-export .metrics-grid,
html.pdf-export .adv-grid {
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}

html.pdf-export .bento-card,
html.pdf-export .svc-tile,
html.pdf-export .proc-step,
html.pdf-export .home-svc-card,
html.pdf-export .home-case-card,
html.pdf-export .home-step,
html.pdf-export .card-dark,
html.pdf-export .value-tile,
html.pdf-export .about-pillar,
html.pdf-export .benefit-step,
html.pdf-export .client-card,
html.pdf-export .metric-item,
html.pdf-export .growth-q,
html.pdf-export .cs-bento-hero,
html.pdf-export .cs-bento-tile,
html.pdf-export .vm-vision,
html.pdf-export .vm-mission,
html.pdf-export .highlight-box,
html.pdf-export .callout,
html.pdf-export .process-quote,
html.pdf-export .quote-banner,
html.pdf-export .problem-item,
html.pdf-export .why-feature,
html.pdf-export .why-mini,
html.pdf-export .values-row {
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}

html.pdf-export .section-tag,
html.pdf-export .section-title {
  break-after: avoid !important;
  page-break-after: avoid !important;
}

html.pdf-export .section-title + * {
  break-before: avoid !important;
  page-break-before: avoid !important;
}

html.pdf-export .about-intro + .highlight-box {
  break-before: avoid !important;
  page-break-before: avoid !important;
}

html.pdf-export .page-main {
  padding-top: 0 !important;
  min-height: auto !important;
}

html.pdf-export .page-main section {
  padding: 64px 32px 80px !important;
}

html.pdf-export .pillars {
  grid-template-columns: repeat(3, 1fr) !important;
}

html.pdf-export .bento {
  grid-template-columns: repeat(12, 1fr) !important;
  padding-top: 8px !important;
}

html.pdf-export .b-stat1,
html.pdf-export .b-stat2,
html.pdf-export .b-team,
html.pdf-export .b-text,
html.pdf-export .b-support,
html.pdf-export .b-expert {
  grid-column: span 3 !important;
}

html.pdf-export .b-hero {
  grid-column: span 6 !important;
  grid-row: span 2 !important;
}

html.pdf-export .b-pill {
  grid-column: span 3 !important;
  grid-row: span 2 !important;
}

html.pdf-export .split,
html.pdf-export .about-intro,
html.pdf-export .home-split,
html.pdf-export .mark-illus-row,
html.pdf-export .cs-case-layout,
html.pdf-export .cs-case-layout-reverse {
  grid-template-columns: 1fr 1fr !important;
}

html.pdf-export .card-grid-2,
html.pdf-export .adv-grid,
html.pdf-export .metrics-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

html.pdf-export .card-grid-3,
html.pdf-export .cta-grid,
html.pdf-export .benefits-track,
html.pdf-export .clients-grid,
html.pdf-export .why-bento,
html.pdf-export .home-case-row,
html.pdf-export .cs-results-bento,
html.pdf-export .cs-index {
  grid-template-columns: repeat(3, 1fr) !important;
}

html.pdf-export .card-grid-4,
html.pdf-export .quarter-grid,
html.pdf-export .values-row,
html.pdf-export .contact-grid,
html.pdf-export .home-svc-grid,
html.pdf-export .growth-timeline {
  grid-template-columns: repeat(4, 1fr) !important;
}

html.pdf-export .process-grid {
  grid-template-columns: repeat(5, 1fr) !important;
}

html.pdf-export .outcomes {
  grid-template-columns: 1fr 1fr !important;
}

html.pdf-export .footer-inner {
  grid-template-columns: 2fr 1fr 1fr 1fr !important;
}

html.pdf-export .footer-bottom {
  flex-direction: row !important;
  text-align: left !important;
}

html.pdf-export .contact-perks {
  display: flex !important;
  flex-direction: column !important;
}

html.pdf-export .form-row {
  grid-template-columns: 1fr 1fr !important;
}

html.pdf-export .about-pillars {
  grid-template-columns: repeat(2, 1fr) !important;
}

html.pdf-export .foundation-bento {
  grid-template-columns: repeat(12, 1fr) !important;
}

html.pdf-export .vm-vision {
  grid-column: span 7 !important;
}

html.pdf-export .vm-mission {
  grid-column: span 5 !important;
}

html.pdf-export .problem-layout {
  grid-template-columns: minmax(260px, 320px) 1fr !important;
}

html.pdf-export .why-feature {
  grid-column: span 2 !important;
  grid-row: span 2 !important;
}

html.pdf-export .services-bento,
html.pdf-export .process-bento {
  grid-template-columns: repeat(12, 1fr) !important;
}

html.pdf-export .svc-tile.s-purple { grid-column: span 5 !important; }
html.pdf-export .svc-tile.s-yellow { grid-column: span 4 !important; }
html.pdf-export .svc-tile.s-green { grid-column: span 3 !important; }
html.pdf-export .svc-tile.s-blue { grid-column: span 4 !important; }
html.pdf-export .svc-tile.s-orange { grid-column: span 3 !important; }
html.pdf-export .svc-tile.s-teal { grid-column: span 5 !important; }
html.pdf-export .svc-tile.s-pink { grid-column: span 3 !important; }
html.pdf-export .svc-tile.s-indigo { grid-column: span 5 !important; }
html.pdf-export .svc-tile.s-lime { grid-column: span 4 !important; }
html.pdf-export .svc-tile.s-violet { grid-column: span 3 !important; }

html.pdf-export .proc-step.s1,
html.pdf-export .proc-step.s2,
html.pdf-export .proc-step.s3 {
  grid-column: span 4 !important;
}

html.pdf-export .proc-step.s4 {
  grid-column: span 8 !important;
}

html.pdf-export .proc-step.s5 {
  grid-column: span 4 !important;
}

html.pdf-export .adv-layout,
html.pdf-export .metrics-layout {
  grid-template-columns: 300px 1fr !important;
}

html.pdf-export .metrics-layout {
  grid-template-columns: 280px 1fr !important;
}

html.pdf-export .adv-stat,
html.pdf-export .metrics-stat {
  position: static !important;
}

html.pdf-export .cs-bento-hero {
  grid-column: span 2 !important;
  grid-row: span 2 !important;
}

html.pdf-export .cs-bento-graphic {
  display: flex !important;
}

html.pdf-export .growth-q-arrow {
  display: block !important;
}

html.pdf-export .growth-q:last-child .growth-q-arrow {
  display: none !important;
}

html.pdf-export .home-band-head {
  flex-direction: row !important;
  align-items: flex-end !important;
}

html.pdf-export .mark-illus-row.reverse .mark-illus-wrap {
  order: -1 !important;
}

@media (max-width: 1024px) {
  .services-timeline-container {
    padding: 60px 24px;
  }
  .timeline-items {
    gap: 80px;
  }
  .timeline-card {
    max-width: 100%;
    padding: 24px 20px;
  }
}

@media (max-width: 768px) {
  /* On mobile and tablet, the line moves to the left and cards stack on the right */
  .timeline-svg-wrap {
    left: 25px;
    transform: none;
    width: 50px;
  }
  .timeline-path-desktop {
    display: none;
  }
  .timeline-path-mobile {
    display: block;
    stroke-width: 8px;
    vector-effect: non-scaling-stroke;
  }
  .timeline-svg-wrap {
    bottom: 180px;
    height: calc(100% - 240px);
  }

  .timeline-item {
    grid-template-columns: 50px 1fr;
    gap: 0;
  }
  
  /* Remove empty cols and force content column */
  .timeline-item.left .timeline-col-content,
  .timeline-item.right .timeline-col-content {
    grid-column: 2;
    justify-content: flex-start;
  }
  .timeline-item .timeline-col-dot {
    grid-column: 1;
    grid-row: 1;
  }
  .timeline-item .timeline-col-empty {
    display: none;
  }
  
  .timeline-cta-wrap {
    justify-content: flex-start;
    /* Deliberately less than the item cards' padding-left (50px): the
       line's drawn end sits right around x=60 in this column, so the
       card's left edge needs to reach past it to actually read as
       "the line flows in behind the card" (matching the desktop
       intent) instead of the line stopping in a visible gap next to
       it. The card's own internal padding below keeps its text well
       clear of the line either way. */
    padding-left: 8px;
  }
  .timeline-cta-card {
    max-width: 100%;
    padding: 32px 24px;
    text-align: left;
    position: relative;
    z-index: 2;
  }
  .timeline-cta-card p {
    margin-left: 0;
  }
  .timeline-cta-card .btn {
    display: flex;
    margin: 24px auto 0;
    width: fit-content;
  }
}

@media (max-width: 480px) {
  .timeline-item {
    grid-template-columns: 40px 1fr;
  }
  .timeline-svg-wrap {
    left: 20px;
    width: 40px;
  }
  .timeline-cta-wrap {
    padding-left: 8px;
  }
  /* Case Studies Hero Selector Cards (always active on mobile) */
  .cs-index-jewel { border-bottom-color: var(--purple); border-bottom-width: 2px; }
  .cs-index-jewel em { color: var(--purple); transform: translateX(2px); }
  .cs-index-cafe { border-bottom-color: var(--green-dk); border-bottom-width: 2px; }
  .cs-index-cafe em { color: var(--green-dk); transform: translateX(2px); }
  .cs-index-skin { border-bottom-color: var(--yellow-dk); border-bottom-width: 2px; }
  .cs-index-skin em { color: var(--yellow-dk); transform: translateX(2px); }
  .cs-index-card { box-shadow: 0 8px 24px rgba(12,16,32,0.05); }
}

@media print {
  @page {
    margin: 0;
  }

  html {
    scroll-behavior: auto;
  }

  body {
    background: white;
    overflow: visible;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .nav {
    display: none !important;
  }

  footer {
    display: none !important;
  }



  .home-cta-band {
    display: none !important;
  }

  .contact-form {
    display: none !important;
  }

  .menu-toggle,
  .contact-modal {
    display: none !important;
  }

  .reveal,
  .reveal.visible {
    opacity: 1 !important;
    transform: none !important;
  }

  .float {
    animation: none !important;
  }

  .bento,
  .services-bento,
  .process-bento,
  .foundation-bento,
  .home-svc-grid,
  .home-case-row,
  .why-bento,
  .benefits-track,
  .clients-grid,
  .cs-results-bento {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .bento-card,
  .svc-tile,
  .proc-step,
  .home-svc-card,
  .home-case-card,
  .home-step,
  .card-dark,
  .value-tile,
  .about-pillar,
  .benefit-step,
  .client-card,
  .metric-item,
  .growth-q,
  .cs-bento-hero,
  .cs-bento-tile,
  .highlight-box,
  .callout,
  .process-quote,
  .quote-banner,
  .problem-item,
  .why-feature,
  .why-mini,
  .values-row {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .section-tag,
  .section-title {
    break-after: avoid;
    page-break-after: avoid;
  }

  .section-title + * {
    break-before: avoid;
    page-break-before: avoid;
  }

  .tagline-bar {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}