/* saas.css — page-specific styles. Shared foundation lives in base.css,
   which must be loaded BEFORE this file. */

.kicker-line { font-family: 'Nunito', sans-serif; font-size: 14px; color: var(--blue); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 20px; }
  .hero .photo-frame { max-width: 300px; margin: 0 auto; }
  @media (max-width: 720px) { .hero .photo-frame { max-width: 220px; }
  }

  /* ---------- HERO ---------- */
  .hero { min-height: 92svh; display: flex; flex-direction: column; justify-content: center; padding-top: 160px; padding-bottom: 40px; }
  .hero .grid { display: grid; grid-template-columns: 0.55fr 1.45fr; gap: 100px; align-items: center; }
  @media (max-width: 780px) { .hero .grid { grid-template-columns: 1fr; gap: 32px; } .hero .grid > .photo-frame { order: -1; }
  }
  .hero .badge {
    display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ink-soft); border: 1px solid var(--rule); border-radius: 20px; padding: 7px 16px 7px 12px; margin-bottom: 28px;
  }
  .hero .badge .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: pulseGlow 2s ease-in-out infinite; }
  @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,98,65,0.4); } 50% { box-shadow: 0 0 0 6px rgba(0,98,65,0); } }
  .hero h1 {
    font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.2; letter-spacing: -0.01em; max-width: 30ch;
  }
  .hero .sub { font-size: clamp(16px, 1.6vw, 19px); color: var(--ink-soft); max-width: 52ch; margin-top: 24px; line-height: 1.7; }
  .hero .tags { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
  .hero .tags .row-break { flex-basis: 100%; width: 0; height: 0; margin: 0; padding: 0; border: 0; }
  .hero .tags span {
    font-size: 13px; letter-spacing: 0.03em; color: var(--ink-soft); padding: 7px 16px;
    border: 1px solid var(--rule); border-radius: 8px; background: rgba(255,255,255,0.6);
  }
  @media (max-width: 640px) {
    .hero .tags { gap: 8px; margin-top: 24px; }
    .hero .tags .row-break { display: none !important; }
    .hero .tags span { font-size: 12px; padding: 6px 13px; border-radius: 7px; letter-spacing: 0.02em; white-space: nowrap; }
    .trusted-strip { margin-top: 44px; }
    .trusted-strip .label { font-size: 11px; letter-spacing: 0.08em; margin-bottom: 12px; }
    .trusted-strip .logos { gap: 12px 22px; }
    .trusted-strip .logos span { font-size: 13.5px; font-weight: 600; }
  }
  .hero .cta-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 40px; align-items: center; }
  .trusted-strip { margin-top: 72px; }
  .trusted-strip .label { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); opacity: 0.7; margin-bottom: 16px; }
  .trusted-strip .logos { display: flex; flex-wrap: wrap; gap: 28px 40px; align-items: center; }
  .trusted-strip .logos span {
    font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 17px; color: var(--ink); opacity: 0.45;
    transition: opacity 0.3s;
  }
  .trusted-strip .logos span:hover { opacity: 0.9; }

  /* ---------- RESULTS / STATS ---------- */
  .stats { padding: 100px 0; }
  .stats .head { max-width: 900px; margin: 0 auto 56px; text-align: center; }
  .stats .head h2 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); }
  .stats .head p { color: var(--ink-soft); margin-top: 12px; font-size: 16px; }
  .stats-grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 40px 32px; align-items: center; }
  .stat-tile { text-align: left; }
  .stat-tile .num { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: clamp(32px, 3.8vw, 48px); color: var(--blue); line-height: 1; letter-spacing: -0.02em; }
  .stat-tile .label { font-size: 14px; color: var(--ink-soft); margin-top: 12px; line-height: 1.5; font-weight: 500; }
  .stat-break { display: none; }
  .stat-photo { grid-column: 3; grid-row: 1 / span 3; justify-self: center; width: 100%; max-width: 380px; transform: translateX(-4%); }
  .stat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (max-width: 900px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
    .stat-photo { grid-column: 1 / -1; grid-row: auto; max-width: 380px; margin: 0 auto; transform: none; }
  }

  /* ---------- SERVICES ---------- */
  .services { padding: 60px 0 120px; }
  .services .head { max-width: 900px; margin: 0 auto 48px; text-align: center; }
  .services .head h2 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); }
  .services .head p { color: var(--ink-soft); margin-top: 12px; font-size: 16px; }
  .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 980px) { .services-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; }
  }
  .svc-card {
    background: rgba(255,255,255,0.5); border: 1px solid var(--rule); border-radius: 14px; padding: 32px 28px;
    transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s, border-color 0.4s;
  }
  .svc-card:hover { transform: translateY(-4px); border-color: var(--blue); box-shadow: 0 20px 40px -16px rgba(20,30,50,0.15); }
  .svc-card .icon { width: 40px; height: 40px; color: var(--blue); margin-bottom: 20px; }
  .svc-card .icon svg { width: 100%; height: 100%; }
  .svc-card h3 { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 19px; margin-bottom: 10px; }
  .svc-card .one-liner { color: var(--ink-soft); font-size: 14.5px; font-style: italic; margin-bottom: 18px; line-height: 1.6; }
  .svc-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .svc-card li { font-size: 14px; color: var(--ink); padding-left: 22px; position: relative; line-height: 1.6; }
  .svc-card li::before {
    content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px;
    border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(0,98,65,0.12);
  }

  /* ---------- CASE STUDIES (placeholder) ---------- */
  .case-studies { padding: 60px 0 120px; }
  .case-studies .head { max-width: 900px; margin: 0 auto 48px; text-align: center; }
  .case-studies .head h2 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); }
  .case-studies .head p { color: var(--ink-soft); margin-top: 12px; font-size: 16px; }
  .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 980px) { .case-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) { .case-grid { grid-template-columns: 1fr; }
  }
  .case-card {
    border: 1.5px dashed var(--rule); border-radius: 14px; padding: 40px 32px; min-height: 220px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
    text-decoration: none; color: inherit; transition: all 0.3s ease;
  }
  .case-card:hover { border-color: var(--blue); background: rgba(0, 98, 65, 0.02); }
  .case-card h3 { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 22px; color: var(--ink-soft); transition: color 0.3s ease; }
  .case-card:hover h3 { color: var(--blue); }
  .case-studies .foot-link { margin-top: 32px; }

  /* ---------- TESTIMONIALS ---------- */
  .testimonials { padding: 60px 0 120px; }
  .testimonials .head { max-width: 900px; margin: 0 auto 48px; text-align: center; }
  .testimonials .head h2 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); }
  .testimonials .head p { color: var(--ink-soft); margin-top: 12px; font-size: 16px; }
  .t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  @media (max-width: 980px) { .t-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) { .t-grid { grid-template-columns: 1fr; }
  }
  .t-card {
    background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 28px 26px;
    display: flex; flex-direction: column; gap: 18px; transition: transform 0.4s cubic-bezier(.16,1,.3,1), box-shadow 0.4s;
  }
  .t-card:nth-child(2) { transform: rotate(-0.6deg); }
  .t-card:nth-child(3) { transform: rotate(0.5deg); }
  .t-card:nth-child(5) { transform: rotate(0.6deg); }
  .t-card:hover { transform: translateY(-4px) rotate(0deg); box-shadow: 0 20px 40px -16px rgba(20,30,50,0.15); }
  .t-card q { font-family: 'Nunito', sans-serif; font-style: italic; font-size: 15.5px; line-height: 1.6; quotes: none; }
  .t-card .who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
  .t-card .avatar {
    width: 38px; height: 38px; border-radius: 50%; background: var(--blue); color: #fff;
    display: flex; align-items: center; justify-content: center; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 14px; flex-shrink: 0;
    overflow: hidden;
  }
  .t-card .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .t-card .who .name { font-weight: 600; font-size: 14px; }
  .t-card .who .title { font-size: 12.5px; color: var(--ink-soft); }
  .t-card.joke { background: var(--bg); border-style: dashed; }

  /* ---------- PROCESS ---------- */
  .process { padding: 120px 0; }
  .process .head { max-width: 900px; margin: 0 auto 64px; text-align: center; }
  .process .head h2 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); }
  .process .head p { color: var(--ink-soft); margin-top: 12px; font-size: 16px; }
  .step { display: grid; grid-template-columns: 100px 1fr; gap: 40px; padding: 40px 0; border-top: 1px solid var(--rule); max-width: 800px; margin: 0 auto; }
  .step:last-child { border-bottom: 1px solid var(--rule); }
  .step .step-num { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 36px; color: var(--blue); opacity: 0.5; }
  .step .step-body { display: block; }
  .step h3 { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 22px; margin-bottom: 12px; }
  .step p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; max-width: 62ch; }
  .step p + p { margin-top: 10px; }
  @media (max-width: 780px) {
    .step { grid-template-columns: 60px 1fr; gap: 20px; padding: 32px 0; }
    .step .step-num { font-size: 26px; }
  }

  /* ---------- FAQ ---------- */
  .faq { padding: 60px 0 120px; }
  .faq .head { max-width: 900px; margin: 0 auto 48px; text-align: center; }
  .faq .head h2 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); }
  .faq .head p { color: var(--ink-soft); margin-top: 12px; font-size: 16px; }
  .faq-list { max-width: 800px; margin: 0 auto; }
  .faq-item { border-bottom: 1px solid var(--rule); }
  .faq-item summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    padding: 20px 0; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 17px; gap: 20px;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary .plus { position: relative; width: 18px; height: 18px; flex-shrink: 0; }
  .faq-item summary .plus::before, .faq-item summary .plus::after {
    content: ''; position: absolute; background: var(--blue); transition: transform 0.3s;
  }
  .faq-item summary .plus::before { top: 8px; left: 0; width: 18px; height: 2px; }
  .faq-item summary .plus::after { top: 0; left: 8px; width: 2px; height: 18px; }
  .faq-item[open] summary .plus::after { transform: rotate(90deg); opacity: 0; }
  .faq-item .faq-a { padding: 0 0 20px; color: var(--ink-soft); font-size: 15.5px; line-height: 1.75; max-width: 62ch; }

  /* ---------- ABOUT ---------- */
  .about { padding: 60px 0 120px; }
  .about .event-grid { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 80px; align-items: center; }
  @media (max-width: 780px) { .about .event-grid { grid-template-columns: 1fr; gap: 32px; }
  }
  .about-photo {
    max-width: 380px; width: 100%; position: relative;
  }
  .about-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .about h2 { font-family: 'Nunito', sans-serif; font-weight: 800; font-size: clamp(26px, 3vw, 36px); margin-bottom: 20px; }
  .about p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.8; max-width: 52ch; }
  .about p + p { margin-top: 14px; }
  .about blockquote { font-family: 'Nunito', sans-serif; font-style: italic; font-weight: 600; font-size: 19px; color: var(--ink); margin: 24px 0; max-width: 40ch; }
  .about blockquote b { color: var(--blue); font-weight: 800; font-style: normal; }

  /* ---------- CONTACT ---------- */
  .contact {
    background-image: linear-gradient(170deg, var(--blue) 0%, #00543A 55%, var(--blue-deep) 100%);
    background-size: cover; color: var(--bg); padding: 140px 0 80px; text-align: center;
  }
  .contact .kicker { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(250,248,243,0.82); margin-bottom: 12px; }
  .contact .invite { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: clamp(24px, 3.4vw, 38px); margin-bottom: 40px; color: #fff; max-width: 20ch; margin-left: auto; margin-right: auto; }
  .contact-photo { max-width: min(300px, 56vw); margin: 0 auto 44px; }
  .contact-photo .tag { color: var(--blue-deep); border-color: var(--blue-deep); }
  @media (max-width: 720px) { .contact-photo { max-width: 220px; }
  }
  .contact .cta-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .contact .avail {
    margin: 48px auto 0; width: fit-content; display: flex; align-items: center; justify-content: center; gap: 10px;
    font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(250,248,243,0.88);
  }
  .contact .avail .pulse-w { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; animation: pulseGreen 2s ease-in-out infinite; }
  @keyframes pulseGreen { 0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); } 50% { box-shadow: 0 0 0 6px rgba(74,222,128,0); } }
  .contact .socials { margin-top: 40px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
  .contact .socials a {
    display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; text-decoration: none;
    color: rgba(250,248,243,0.9); border: 1px solid rgba(250,248,243,0.38); border-radius: 10px;
    transition: background 0.3s, border-color 0.3s, color 0.3s;
  }
  .contact .socials a svg { width: 18px; height: 18px; }
  .contact .socials a:hover { background: rgba(250,248,243,0.12); border-color: rgba(250,248,243,0.4); color: #fff; }
  .contact .foot { margin-top: 56px; display: flex; justify-content: center; font-size: 13px; color: rgba(250,248,243,0.72); flex-wrap: wrap; gap: 10px; }

  /* ---------- hero tags & trusted strip mobile refinement ---------- */
  @media (max-width: 640px) {
    .hero .tags {
      gap: 8px !important;
      margin-top: 24px !important;
    }
    .hero .tags .row-break {
      display: none !important;
    }
    .hero .tags span {
      font-size: 12px !important;
      padding: 6px 13px !important;
      border-radius: 7px !important;
      letter-spacing: 0.02em !important;
      white-space: nowrap !important;
    }

    .trusted-strip {
      margin-top: 44px !important;
    }
    .trusted-strip .label {
      font-size: 11px !important;
      letter-spacing: 0.08em !important;
      margin-bottom: 12px !important;
    }
    .trusted-strip .logos {
      gap: 12px 22px !important;
    }
    .trusted-strip .logos span {
      font-size: 13.5px !important;
      font-weight: 600 !important;
    }
  }

  /* The AI quote is a bit, not a client testimonial. It stays in the grid so
     the row still reads as one set of cards; the dashed border and the kicker
     above the quote are what mark it as a joke. */
  .t-card.joke .joke-label {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-wrap: balance;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--rule);
  }