/* ============================================================
   /tjenester hub redesign (Aug 2026) — matches the homepage
   design system. Loads AFTER styles.css + home.css on
   tjenester/index.html only. home.css owns the shared og-*
   chrome (hero shell, header, picker card, fields card, footer,
   contact inputs); only the hub-specific pieces live here.
   ============================================================ */

/* ---- Hero: taller than a standard section, bright accents on dark ---- */
.og-tj-hero { position: relative; max-width: 1280px; margin: 0 auto; padding: clamp(53px, 9.75vw, 91px) clamp(20px, 6vw, 48px) clamp(91px, 14.6vw, 146px); }
.og-tj-hero .og-eyebrow { color: var(--og-green-bright); margin-bottom: 12px; }
.og-tj-hero h1 {
  font-family: var(--og-head); font-weight: 800; font-size: clamp(34px, 5vw, 58px);
  line-height: 1.08; margin: 0 0 22px; max-width: 820px; color: var(--og-cream);
}
.og-tj-hero h1 .u-bright { color: var(--og-green-bright); border-bottom: 3px solid var(--og-green-bright); }
.og-tj-hero .lead { font-size: 18px; line-height: 1.65; max-width: 640px; margin: 0; color: #F5F1E7CC; }
.og-nav a.active, .og-mobile-menu a.active { color: var(--og-green-bright); }

/* ---- Goal picker: centered flex chips instead of the homepage grid ---- */
.og-goal-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 28px; }
.og-goal-grid .og-pick { flex: 1 1 260px; max-width: 320px; padding: 12px 16px; }

/* ---- Flat service index (line-divided rows) ---- */
.og-svc-list { margin-top: clamp(32px, 4vw, 44px); border-top: 1px solid #1C1C1A1A; }
.og-svc-row {
  display: grid; grid-template-columns: 230px 1fr auto; column-gap: 32px; align-items: center;
  padding: clamp(28px, 4vw, 40px) 0; border-bottom: 1px solid #1C1C1A1A; text-decoration: none;
}
.og-svc-name { display: flex; align-items: baseline; gap: 14px; }
.og-svc-name .n { font-family: var(--og-serif); font-style: italic; color: var(--og-green-deep); font-size: 14px; }
.og-svc-name h3 { font-family: var(--og-head); font-weight: 800; font-size: 19px; margin: 0; color: var(--og-ink); line-height: 1.3; }
.og-svc-row > p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--og-ink); }
.og-svc-go { text-align: right; }
.og-svc-go span {
  display: inline-block; width: 180px; text-align: center; background: var(--og-green);
  color: var(--og-cream); padding: 10px 18px; border-radius: 8px; font-weight: 600;
  font-size: 13px; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease;
}
.og-svc-row:hover .og-svc-go span { transform: translateY(-2px); box-shadow: 0 14px 32px -14px var(--og-green); }

/* ---- Transition quote card (sage, centered) ---- */
.og-quote-card {
  background: var(--og-sage); border-radius: 24px; padding: clamp(32px, 5vw, 48px);
  max-width: 640px; margin: 0 auto clamp(40px, 6vw, 60px); text-align: center;
}
.og-quote-card .q1 { font-family: var(--og-head); font-weight: 700; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.35; margin: 0 0 16px; color: var(--og-ink); }
.og-quote-card .q2 { font-family: var(--og-serif); font-style: italic; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.35; margin: 0; color: var(--og-ink); }

/* ---- AI systems band (cool gradient) ---- */
.og-ai-band {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(120deg, #D7E3EC, #EEF2F5); border-radius: 20px;
  padding: clamp(28px, 4vw, 40px); text-decoration: none;
}
.og-ai-band-copy { max-width: 600px; }
.og-ai-band .kicker { font-family: var(--og-serif); font-style: italic; color: #1C1C1A99; font-size: 13px; letter-spacing: 0.02em; margin-bottom: 10px; }
.og-ai-band h3 { font-family: var(--og-head); font-weight: 800; font-size: 24px; margin: 0 0 12px; color: var(--og-ink); }
.og-ai-band p { font-size: 15px; line-height: 1.65; margin: 0; color: var(--og-ink); }
.og-ai-band .go { font-weight: 600; font-size: 14px; color: var(--og-green-deep); white-space: nowrap; }

/* ---- Team card (white, copy + circular faces) ---- */
.og-tj-team {
  background: #fff; border-radius: 24px; padding: clamp(28px, 5vw, 48px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 48px); align-items: center;
}
.og-tj-team .og-h2 { margin-bottom: 16px; }
.og-tj-team p { font-size: 15px; line-height: 1.65; margin: 0 0 18px; color: var(--og-ink); }
.og-tj-team .go { font-weight: 600; font-size: 14px; text-decoration: none; }
.og-tj-faces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.og-tj-face { text-align: center; }
.og-tj-face .ph { border-radius: 999px; overflow: hidden; aspect-ratio: 1/1; margin-bottom: 10px; background: var(--og-sage); }
.og-tj-face .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.og-tj-face .nm { font-weight: 700; font-size: 14px; }
.og-tj-face .rl { font-size: 12px; color: #1C1C1A99; }

/* ---- Contact (full-width white form card) ---- */
#contact .og-contact-links { margin-bottom: 24px; }
.og-cform-row { display: flex; gap: 14px; flex-wrap: wrap; }
.og-cform-row input:nth-child(1) { flex: 0 1 220px; }
.og-cform-row input:nth-child(2) { flex: 0 1 260px; }
.og-cform-row input:nth-child(3) { flex: 1 1 260px; }
#contact .chips { gap: 8px; }
#contact .chip { padding: 9px 14px; font-size: 13px; }
.og-cform-submit { display: flex; justify-content: center; }
.og-cform-submit .form-submit { width: 40%; min-width: 280px; }

/* ---- Responsive ---- */
@media (max-width: 640px) {
  .og-svc-row { grid-template-columns: 1fr; row-gap: 12px; }
  .og-svc-go { text-align: left; }
  .og-svc-go span { width: auto; }
  .og-tj-team { grid-template-columns: 1fr; }
  .og-tj-faces { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .og-goal-grid .og-pick { flex-basis: 100%; max-width: none; }
  .og-cform-row input { flex: 1 1 100% !important; }
  .og-cform-submit .form-submit { width: 100%; min-width: 0; }
}