/* ==========================================================================
   content.css — standalone content pages (Technology, Roots & Reach, Contact)
   Builds on tokens.css / base.css / components.css / home.css / product.css
   ========================================================================== */

/* Section heading block */
.csec__head { max-width: 680px; }
.csec__head .eyebrow { margin-bottom: var(--s-3); }
.csec__head h2 { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; }
.csec__lead { margin-top: var(--s-5); font-size: 18px; line-height: 1.55; color: #454e59; max-width: 620px; }
.csec__head--center { max-width: 760px; margin-inline: auto; text-align: center; }
.csec__head--center .csec__lead { margin-inline: auto; }
.prose > * + * { margin-top: var(--s-5); }
.prose p { color: #3c454f; line-height: 1.6; }

/* How-it-works numbered steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); margin-top: var(--s-12); }
.step { position: relative; padding: var(--s-8) var(--s-6); border: 1px solid var(--c-line);
  border-radius: var(--r-card); background: var(--c-white); }
.step__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-cyan-tint); color: var(--c-cyan-deep); font-weight: var(--fw-bold); font-size: 17px;
  margin-bottom: var(--s-5); }
.step__t { font-weight: var(--fw-bold); font-size: 18px; margin-bottom: var(--s-2); }
.step p { color: #4a525c; line-height: 1.55; font-size: var(--fs-meta); }
@media (max-width: 860px){ .steps { grid-template-columns: 1fr; } }

/* Diagram / figure placeholder (real artwork pending from client) */
.figph { display: grid; place-items: center; text-align: center; min-height: 300px;
  border: 1.5px dashed var(--c-line); border-radius: var(--r-card);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--c-cyan) 7%, #fff), #fff);
  color: var(--c-grey); padding: var(--s-10); }
.figph svg { width: 54px; height: 54px; color: var(--c-cyan); opacity: .7; margin-bottom: var(--s-4); }
.figph__t { font-size: var(--fs-meta); max-width: 34ch; line-height: 1.45; }

/* Two facility cards (Roots & Reach) */
.facilities { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-top: var(--s-10); }
.facility { padding: var(--s-8); border: 1px solid var(--c-line); border-radius: var(--r-card); background: var(--c-white); }
.facility__pin { width: 26px; height: 26px; color: var(--c-cyan-deep); margin-bottom: var(--s-3); }
.facility__co { font-weight: var(--fw-bold); font-size: 17px; }
.facility__addr { margin-top: var(--s-2); font-size: var(--fs-meta); line-height: 1.5; color: #4a525c; font-style: normal; }
@media (max-width: 680px){ .facilities { grid-template-columns: 1fr; } }

/* Placeholder note band (News, Leadership profiles pending) */
.placeholder { border: 1.5px dashed var(--c-line); border-radius: var(--r-card);
  background: var(--c-grey-50); padding: var(--s-10) var(--s-8); text-align: center; color: var(--c-grey); }
.placeholder__t { font-size: var(--fs-meta); line-height: 1.5; max-width: 52ch; margin-inline: auto; }

/* Leadership people grid */
.people { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-8); }
.person--text { width: 100%; max-width: 640px; text-align: left;
  padding: var(--s-6) var(--s-8); border-left: 3px solid var(--c-cyan);
  background: var(--c-grey-50); border-radius: 0 var(--r-card) var(--r-card) 0; }
.person__name { font-weight: var(--fw-bold); font-size: 18px; line-height: 1.25; color: var(--c-slate); }
.person__role { margin-top: 2px; font-size: var(--fs-meta); line-height: 1.4; color: var(--c-cyan-deep); font-weight: var(--fw-semi); }
.person__bio { margin-top: var(--s-3); font-size: 15px; line-height: 1.6; color: #4a525c; }
.leadgroup + .leadgroup { margin-top: var(--s-12); }
.leadgroup__t { font-size: 15px; font-weight: var(--fw-bold); color: var(--c-slate);
  text-transform: uppercase; letter-spacing: .08em; padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line); margin-bottom: var(--s-8); }
@media (max-width: 520px){ .person--text { max-width: 100%; } }

/* Legacy quote */
.quoteblock { text-align: center; max-width: 860px; margin-inline: auto; }
.quoteblock__mark { font-size: 72px; line-height: .6; color: var(--c-cyan); font-weight: var(--fw-bold); }
.quoteblock blockquote { margin: var(--s-6) 0 0; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.35;
  font-weight: var(--fw-light); color: var(--c-slate); }
.quoteblock__cite { display: block; margin-top: var(--s-8); font-size: var(--fs-meta); font-style: normal; color: #4a525c; }
.quoteblock__cite strong { display: block; font-size: 17px; color: var(--c-slate); font-style: normal; }

/* ---- Contact page ---- */
.contact-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-20); align-items: start; }
@media (max-width: 900px){ .contact-grid { grid-template-columns: 1fr; gap: var(--s-12); } }

.cform { display: grid; gap: var(--s-5); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
@media (max-width: 520px){ .cform__row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: var(--fs-meta); font-weight: var(--fw-semibold); color: var(--c-slate); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 15px; color: var(--c-black);
  padding: 12px 14px; border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-white);
  transition: border-color var(--t-base), box-shadow var(--t-base); width: 100%; }
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--c-cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-cyan) 18%, transparent); }
.cform__submit { justify-self: start; margin-top: var(--s-2); }

.cinfo { display: flex; flex-direction: column; gap: var(--s-8); }
.cinfo__block .cinfo__h { font-size: 15px; font-weight: var(--fw-bold); color: var(--c-slate);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: var(--s-3); }
.cinfo__addr { font-style: normal; font-size: var(--fs-meta); line-height: 1.6; color: #3c454f; }
.cinfo__addr a { color: var(--c-cyan-deep); }
.cinfo__social { display: flex; gap: var(--s-3); }
.cinfo__social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--c-line); color: var(--c-slate); transition: all var(--t-base); }
.cinfo__social a:hover { background: var(--c-cyan-deep); border-color: var(--c-cyan-deep); color: #fff; }
.cinfo__social svg { width: 19px; height: 19px; }

.cmap { margin-top: var(--s-15); border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--c-line); }
.cmap iframe { display: block; width: 100%; height: 380px; border: 0; }