/* Jubilee Cell LLC — inner marketing pages
   About · Solutions · What We Carry · Who We Serve · Contact
   Load order: tokens.css → styles.css → pages.css (→ app.css for catalog/register)
   Everything here builds on the primitives in styles.css. */

/* ---------- shared page hero (no photo, short) ---------- */
.jc-phero { position: relative; overflow: hidden; background: var(--jc-mist); padding: 220px var(--jc-gutter) 100px; }
.jc-phero--sand { background: var(--jc-sand); }
.jc-phero__glow { top: -160px; right: -180px; width: 620px; height: 620px; opacity: 0.32; }
.jc-phero__inner { position: relative; max-width: var(--jc-container); margin: 0 auto; }
.jc-phero__inner .jc-h1 { max-width: 900px; text-wrap: balance; }
.jc-phero__inner .jc-lead { max-width: 640px; margin: 0; }
.jc-phero--split .jc-phero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 72px; align-items: center; }

/* jump links under a hero (Solutions) */
.jc-jumps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 44px; }
.jc-jumps a { font-size: var(--jc-small); font-weight: 600; color: var(--jc-petrol); background: var(--jc-white); border: 1px solid var(--jc-border); border-radius: var(--jc-radius-pill); padding: 11px 20px; transition: border-color var(--jc-dur-xs) var(--jc-ease); }
.jc-jumps a:hover { border-color: var(--jc-cyan); color: var(--jc-petrol); }

/* ---------- grids ---------- */
.jc-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.jc-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.jc-split--reverse > *:first-child { order: 2; }
.jc-section__head { max-width: 700px; margin-bottom: 56px; }
.jc-section__head--wide { max-width: 780px; }
.jc-section__head--center { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.jc-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 56px; }

/* ---------- About: milestone timeline ---------- */
.jc-timeline { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--jc-cyan-200); }
.jc-timeline__step { padding: 32px 28px 8px; border-left: 1px solid var(--jc-cyan-200); }
.jc-timeline__step:first-child { padding-left: 0; border-left: 0; }
.jc-timeline__step:last-child { padding-right: 0; }
.jc-timeline__node { width: 11px; height: 11px; border-radius: 50%; background: var(--jc-cyan); margin: -38px 0 26px; box-shadow: 0 0 0 5px var(--jc-cyan-50); }
.jc-timeline__node--coral { background: var(--jc-coral); }
.jc-timeline__year { font-family: var(--jc-font-display); font-weight: 700; font-size: 26px; color: var(--jc-petrol); margin-bottom: 10px; }
.jc-timeline__step p { font-size: 14px; line-height: 1.6; color: var(--jc-slate); margin: 0; }

/* ---------- About: metric tiles + values + team ---------- */
.jc-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.jc-metric { border: 1px solid var(--jc-border); border-radius: var(--jc-radius-card); padding: 24px 26px; }
.jc-metric__value { font-weight: 700; font-size: 34px; letter-spacing: var(--jc-tracking-tight); color: var(--jc-petrol); }
.jc-metric__value--coral { color: var(--jc-coral); }
.jc-metric__label { font-size: var(--jc-small); color: var(--jc-slate); margin-top: 8px; }

.jc-value svg { width: 38px; height: 38px; stroke: var(--jc-petrol); stroke-width: 1.1; fill: none; }
.jc-value h3 { font-family: var(--jc-font-display); font-weight: 600; font-size: 20px; color: var(--jc-petrol); margin: 20px 0 12px; }
.jc-value p { font-size: 15px; line-height: 1.65; color: var(--jc-slate); margin: 0; }

.jc-person__photo { position: relative; aspect-ratio: 1 / 1.12; border-radius: var(--jc-radius-card); overflow: hidden; background: var(--jc-cyan-50); }
.jc-person__photo img { width: 100%; height: 100%; object-fit: cover; }
.jc-person__name { font-family: var(--jc-font-display); font-weight: 600; font-size: 19px; color: var(--jc-petrol); margin-top: 18px; }
.jc-person__role { font-size: 14px; color: var(--jc-slate); margin-top: 4px; }

/* ---------- Solutions: alternating service rows ---------- */
.jc-service__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.jc-service__index { font-size: var(--jc-eyebrow); font-weight: 600; letter-spacing: var(--jc-tracking-eyebrow); text-transform: uppercase; color: var(--jc-deep-cyan); }
.jc-ticks { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.jc-tick { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.55; color: var(--jc-slate); }
.jc-tick__mark { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--jc-cyan-50); display: grid; place-items: center; }
.jc-tick__mark svg { width: 10px; height: 10px; stroke: var(--jc-deep-cyan); stroke-width: 3; fill: none; }
.jc-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.jc-tag { background: var(--jc-mist); border: 1px solid var(--jc-border); border-radius: var(--jc-radius-button); padding: 12px 18px; font-size: var(--jc-small); font-weight: 600; color: var(--jc-petrol); }
.jc-solution--tall { padding: 36px 34px; }
.jc-solution__meta { font-size: var(--jc-small); color: var(--jc-muted); }

/* ---------- Solutions: pricing tier table ---------- */
.jc-tiers { border: 1px solid var(--jc-border); border-radius: var(--jc-radius-card); overflow: hidden; }
.jc-tiers__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; border-bottom: 1px solid var(--jc-border-soft); }
.jc-tiers__row:last-child { border-bottom: 0; }
.jc-tiers__row--head { background: var(--jc-mist); border-bottom: 1px solid var(--jc-border); }
.jc-tiers__row--alt { background: #FBFDFE; }
.jc-tiers__row > * { padding: 22px 26px; font-size: 15px; color: var(--jc-slate); }
.jc-tiers__row--head > * { padding: 20px 26px; }
.jc-tiers__label { font-weight: 600; color: var(--jc-petrol); }
.jc-tiers__col { font-family: var(--jc-font-display); font-weight: 600; font-size: 17px; color: var(--jc-petrol); }
.jc-tiers__eyebrow { font-size: var(--jc-eyebrow); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jc-deep-cyan); }
.jc-tiers__none { color: var(--jc-muted); }
.jc-tiers__note { font-size: var(--jc-small); color: var(--jc-muted); margin-top: 20px; }

/* ---------- What We Carry: category cards + grades ---------- */
.jc-cat { display: block; overflow: hidden; transition: transform var(--jc-dur-sm) var(--jc-ease), box-shadow var(--jc-dur-sm) var(--jc-ease), border-color var(--jc-dur-sm) var(--jc-ease); }
.jc-cat:hover { transform: translateY(-8px); box-shadow: var(--jc-shadow-hover); border-color: var(--jc-cyan); }
.jc-cat__photo { position: relative; aspect-ratio: 16 / 9; background: var(--jc-cyan-50); }
.jc-cat__photo img { width: 100%; height: 100%; object-fit: cover; }
.jc-cat__body { padding: 28px 30px 30px; }
.jc-cat__body p { font-size: 15px; line-height: 1.6; color: var(--jc-slate); margin: 0 0 18px; }
.jc-cat__foot { display: flex; align-items: center; justify-content: space-between; }
.jc-cat__count { font-family: var(--jc-font-mono); font-size: 12px; color: var(--jc-muted); }

.jc-grade { border: 1px solid var(--jc-border); border-radius: var(--jc-radius-card); padding: 30px 28px; }
.jc-grade__badge { display: inline-block; background: var(--jc-cyan-50); border-radius: var(--jc-radius-pill); padding: 7px 14px; font-family: var(--jc-font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jc-deep-cyan); margin-bottom: 20px; }
.jc-grade__badge--lot { background: var(--jc-sand); color: var(--jc-coral); }
.jc-grade h3 { font-family: var(--jc-font-display); font-weight: 600; font-size: 20px; color: var(--jc-petrol); margin: 0 0 12px; }
.jc-grade p { font-size: 14px; line-height: 1.6; color: var(--jc-slate); margin: 0; }
.jc-notes { background: var(--jc-mist); border: 1px solid var(--jc-border); border-radius: var(--jc-radius-card); padding: 40px 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 56px; }
.jc-notes h3 { font-family: var(--jc-font-display); font-weight: 600; font-size: 19px; color: var(--jc-petrol); margin: 0 0 12px; }
.jc-notes p { font-size: 14px; line-height: 1.6; color: var(--jc-slate); margin: 0; }

/* the brand marquee on this page sits on --jc-mist, so the edge mask changes */
.jc-brands--mist { background: var(--jc-mist); }
.jc-brands--mist .jc-brands__mask { background: linear-gradient(90deg, var(--jc-mist) 0%, rgba(242,249,251,0) 14%, rgba(242,249,251,0) 86%, var(--jc-mist) 100%); }

/* ---------- Who We Serve: segment cards ---------- */
.jc-segment { border: 1px solid var(--jc-border); border-radius: var(--jc-radius-card); padding: 40px 42px; transition: transform var(--jc-dur-sm) var(--jc-ease), box-shadow var(--jc-dur-sm) var(--jc-ease), border-color var(--jc-dur-sm) var(--jc-ease); }
.jc-segment:hover { transform: translateY(-6px); box-shadow: var(--jc-shadow-hover); border-color: var(--jc-cyan); }
.jc-segment svg { width: 40px; height: 40px; stroke: var(--jc-petrol); stroke-width: 1.1; fill: none; }
.jc-segment h3 { font-family: var(--jc-font-display); font-weight: 600; font-size: 26px; color: var(--jc-petrol); margin: 22px 0 14px; }
.jc-segment p { font-size: var(--jc-body); line-height: 1.7; color: var(--jc-slate); margin: 0 0 24px; text-wrap: pretty; }
.jc-segment .jc-chip { background: var(--jc-mist); padding: 9px 16px; }
.jc-segment--wide { grid-column: span 2; background: var(--jc-mist); display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.jc-segment--wide:hover { transform: none; box-shadow: none; border-color: var(--jc-border); }
.jc-segment--wide p { margin-bottom: 0; }
.jc-segment--wide .jc-chip { background: var(--jc-white); }

/* numbered columns on the cyan band (Who We Serve) */
.jc-why__num { font-family: var(--jc-font-mono); font-size: 12px; letter-spacing: 0.12em; color: rgba(11,46,56,0.55); margin-bottom: 16px; }

/* ---------- steps (Who We Serve) ---------- */
.jc-steps { display: flex; flex-direction: column; gap: 28px; }
.jc-step { display: flex; gap: 22px; align-items: flex-start; }
.jc-step__num { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--jc-cyan-50); display: grid; place-items: center; font-family: var(--jc-font-display); font-weight: 700; font-size: 16px; color: var(--jc-deep-cyan); }
.jc-step h3 { font-family: var(--jc-font-display); font-weight: 600; font-size: 20px; color: var(--jc-petrol); margin: 0 0 8px; }
.jc-step p { font-size: 15px; line-height: 1.65; color: var(--jc-slate); margin: 0; }
.jc-quote-card { background: var(--jc-mist); border: 1px solid var(--jc-border); border-radius: var(--jc-radius-card); padding: 52px 48px; }
.jc-quote-card .jc-quote-mark { font-size: 72px; margin: 0 0 28px; }
.jc-quote-card blockquote { font-family: var(--jc-font-display); font-weight: 600; font-size: 26px; line-height: 1.35; letter-spacing: -0.02em; color: var(--jc-petrol); margin: 0 0 32px; text-wrap: pretty; }
.jc-quote-card__author { display: flex; align-items: center; gap: 14px; }

/* ---------- Contact ---------- */
.jc-contact { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 80px; align-items: start; max-width: var(--jc-container); margin: 0 auto; }
.jc-contact__form { padding: 48px 52px; }
.jc-contact__aside { display: flex; flex-direction: column; gap: 20px; }
.jc-contact__card { border: 1px solid var(--jc-border); border-radius: var(--jc-radius-card); padding: 32px 34px; background: var(--jc-white); }
.jc-contact__card--mist { background: var(--jc-mist); }
.jc-contact__card--map { padding: 0; overflow: hidden; }
.jc-contact__map { position: relative; aspect-ratio: 16 / 9; background: var(--jc-cyan-50); }
.jc-contact__map img { width: 100%; height: 100%; object-fit: cover; }
.jc-contact__label { font-size: var(--jc-eyebrow); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jc-deep-cyan); margin-bottom: 18px; }
.jc-contact__big { display: block; font-family: var(--jc-font-display); font-weight: 600; font-size: 21px; color: var(--jc-petrol); }
.jc-contact__big + .jc-contact__big { margin-top: 6px; }
.jc-contact__card p { font-size: 14px; line-height: 1.6; color: var(--jc-slate); margin: 14px 0 0; }
.jc-contact__addr { font-family: var(--jc-font-display); font-weight: 600; font-size: 18px; line-height: 1.45; color: var(--jc-petrol); }

.jc-field { display: block; }
.jc-field__label { display: block; font-size: var(--jc-eyebrow); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jc-deep-cyan); margin-bottom: 10px; }
.jc-field input, .jc-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--jc-border); border-radius: var(--jc-radius-button); background: var(--jc-white); padding: 14px 16px; font-family: var(--jc-font-body); font-size: 15px; line-height: 1.6; color: var(--jc-petrol); outline: none; transition: border-color var(--jc-dur-xs) var(--jc-ease), box-shadow var(--jc-dur-xs) var(--jc-ease); }
.jc-field textarea { resize: vertical; min-height: 132px; }
.jc-field input:focus, .jc-field textarea:focus { border-color: var(--jc-cyan); box-shadow: 0 0 0 4px rgba(105,203,231,0.22); }
.jc-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.jc-field-block { margin-top: 30px; }
.jc-topics { display: flex; flex-wrap: wrap; gap: 10px; }
.jc-topic { font-family: var(--jc-font-body); font-size: var(--jc-small); font-weight: 600; color: var(--jc-petrol); background: var(--jc-white); border: 1px solid var(--jc-border); border-radius: var(--jc-radius-pill); padding: 11px 20px; cursor: pointer; transition: background var(--jc-dur-xs) var(--jc-ease), border-color var(--jc-dur-xs) var(--jc-ease); }
.jc-topic:hover { border-color: var(--jc-cyan); }
.jc-topic.is-selected { background: var(--jc-cyan); border-color: var(--jc-cyan); }
.jc-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 34px; flex-wrap: wrap; }
.jc-form__consent { font-size: var(--jc-small); line-height: 1.55; color: var(--jc-muted); margin: 0; max-width: 340px; }

.jc-sent { text-align: center; padding: 40px 0; }
.jc-sent__mark { width: 64px; height: 64px; border-radius: 50%; background: var(--jc-cyan); display: grid; place-items: center; margin: 0 auto 26px; }
.jc-sent__mark svg { stroke: var(--jc-petrol); stroke-width: 1.8; fill: none; }
.jc-sent h2 { font-family: var(--jc-font-display); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; color: var(--jc-petrol); margin: 0 0 14px; }
.jc-sent p { font-size: var(--jc-body); line-height: 1.65; color: var(--jc-slate); margin: 0 auto 30px; max-width: 420px; }

/* ---------- FAQ accordion ---------- */
.jc-faq { max-width: 900px; margin: 0 auto; }
.jc-faq__list { border-top: 1px solid var(--jc-border); }
.jc-faq__item { border-bottom: 1px solid var(--jc-border); }
.jc-faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; text-align: left; background: none; border: 0; cursor: pointer; padding: 28px 4px; font-family: var(--jc-font-display); font-weight: 600; font-size: 20px; color: var(--jc-petrol); }
.jc-faq__icon { flex: 0 0 auto; font-family: var(--jc-font-body); font-size: 22px; font-weight: 400; color: var(--jc-deep-cyan); transition: transform var(--jc-dur-xs) var(--jc-ease); }
.jc-faq__item.is-open .jc-faq__icon { transform: rotate(45deg); }
.jc-faq__a { max-height: 0; overflow: hidden; transition: max-height var(--jc-dur-md) var(--jc-ease); }
.jc-faq__a p { font-size: var(--jc-body); line-height: 1.7; color: var(--jc-slate); margin: 0 4px 28px; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .jc-phero--split .jc-phero__inner { grid-template-columns: 1fr; gap: 48px; }
  .jc-timeline { grid-template-columns: repeat(2, 1fr); border-top: 0; }
  .jc-timeline__step { border-left: 0; border-top: 1px solid var(--jc-cyan-200); padding: 32px 0 8px; }
  .jc-timeline__node { margin-top: -38px; }
  .jc-grid-4, .jc-notes { grid-template-columns: repeat(2, 1fr); }
  .jc-contact { grid-template-columns: 1fr; gap: 40px; }
  .jc-segment--wide { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 768px) {
  .jc-phero { padding: 120px var(--jc-gutter) 64px; }
  .jc-grid-2, .jc-grid-4, .jc-timeline, .jc-metrics, .jc-notes, .jc-tags { grid-template-columns: 1fr; }
  .jc-segment, .jc-segment--wide { grid-column: auto; padding: 30px 26px; }
  .jc-contact__form { padding: 32px 26px; }
  .jc-field-row { grid-template-columns: 1fr; }
  .jc-head-row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .jc-faq__q { font-size: 17px; padding: 22px 0; }
  .jc-topic, .jc-jumps a { min-height: 48px; display: inline-flex; align-items: center; }
  /* tier table becomes stacked label/value pairs */
  .jc-tiers__row { grid-template-columns: 1fr; }
  .jc-tiers__row > * { padding: 14px 20px; }
  .jc-tiers__row--head { display: none; }
  .jc-tiers__label { background: var(--jc-mist); }
}