/* =============================================================================
   mfr-subpage.css
   Start-with-Standard–style hero for the three Manufacturer Services subpages
   (process-engineering, planning-standardization, project-management).

   Loaded IN ADDITION to design.css. The hero uses .svc-hero (NOT .ds-hero) so
   it never collides with design.html, which shares design.css. Layout mirrors
   .sws-hero: a content block, then a contained image below it, plus a left
   accent line — in the manufacturer blue (--c-accent), not the SWS gold.
   ============================================================================= */

/* Inherit the base .hero flex (display:flex + align-items:center): content
   sits on the left, the image on the right — the Start-with-Standard layout. */
.svc-hero {
  position: relative;
  /* Fill the viewport (above-the-fold) so the next section never peeks in. The
     content is right-sized to fit, and align-items:center (from base .hero)
     centers it within the full height. */
  min-height: 100svh;
  padding-block: calc(var(--nav-h) + var(--sp-3)) var(--sp-4);
  overflow: hidden;
  background: var(--c-bg);
}

/* Left accent line — becomes a bottom line on mobile. */
.svc-hero__accent-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--c-accent);
  pointer-events: none;
}

.svc-hero .hero__inner {
  max-width: 48rem;  /* wider than --w-text so the headline uses more horizontal space */
  /* Section already clears the fixed nav via base .hero padding-top; keep the
     inner top padding small so the hero fits above the fold. */
  padding-block: var(--sp-3) var(--sp-5);
}

/* Two-column split via grid (deterministic): the text column gets the larger
   share so the headline has more horizontal room. Overrides the base .hero flex.
   The base .container's margin-inline:auto + max-width are zeroed so each fills
   its grid cell. */
.svc-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  column-gap: clamp(var(--sp-4), 4vw, var(--sp-6));
  /* Cap the hero content on wide displays so the headline and image don't
     spread to opposite edges (matches the 1440px tile cap). Section bg is
     white = page bg, so the capped sides are seamless. */
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.svc-hero > .container,
.svc-hero__media {
  margin-inline: 0;
  max-width: none;
  padding-inline: 0;   /* gutter now comes from .svc-hero, not the container */
}

.svc-hero .hero__eyebrow {
  display: block;
  margin-bottom: var(--sp-3);
}

.svc-hero h1 {
  max-width: none;  /* fill the (wider) content column */
  margin-bottom: var(--sp-2);
  font-weight: 700;
  /* Smaller than the homepage mega-hero so a subpage hero (headline + image +
     CTA) fits above the fold. */
  font-size: clamp(2.25rem, 1.5rem + 2.2vw, 3rem);
  line-height: 1.08;
}

/* Subheadline — the second half of the original headline sentence, promoted
   out of the H1 so the headline stays short and above the fold. */
.svc-hero__tagline {
  margin: 0 0 var(--sp-3);
  max-width: 34ch;
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.15;
  color: var(--c-ink);
}

.svc-hero .hero__sub {
  margin-top: 0;
  max-width: 56ch;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--c-ink-2);
}

.svc-hero .hero__actions {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Contained image below the content. */
.svc-hero__media {
  margin-top: 0;
}

.svc-hero__placeholder,
.svc-hero__picture {
  display: block;
  border-radius: var(--r-lg);
  overflow: hidden;
}

.svc-hero__picture img {
  display: block;
  width: 100%;
  height: auto;
}

/* The placeholder div carries its own aspect-ratio via inline style; keep the
   rounded corners from the wrapper. */
.svc-hero__media .placeholder {
  border-radius: 0;
}

/* "What's Included" lineup cards (all three manufacturer subpages). Cards are
   already equal height; headings (1–2 lines) and paragraphs vary, so the body
   text ends at different heights. Push the body block to a shared bottom
   baseline (margin-top:auto on the first paragraph) so the cards read evenly. */
#process-services .card h3 + .card__body,
#pm-services .card h3 + .card__body {
  margin-top: auto;
}

/* process-engineering + planning-standardization "What's Included": lay the
   three cards out as 2 + 1 — two on the top row, the third spanning the full
   width of both above it — so the cards are wider and far less tall than the
   old 3-up. Only in the 2-up range — below 768px the grid is a single column,
   so every card is full width. */
@media (min-width: 769px) {
  #process-services .card-grid > .card:last-child,
  #planning-services .card-grid > .card:last-child,
  #pm-services .card-grid > .card:last-child,
  #design-services .card-grid > .card:last-child {
    grid-column: 1 / -1;   /* span the full width of the two cards above */
    /* Centre the content and cap the body width so the full-width card doesn't
       stretch the text into uncomfortably long lines (matches the development
       page's 2-2-1 wide card). */
    align-items: center;
    text-align: center;
  }
  #process-services .card-grid > .card:last-child .card__body,
  #planning-services .card-grid > .card:last-child .card__body,
  #pm-services .card-grid > .card:last-child .card__body,
  #design-services .card-grid > .card:last-child .card__body {
    max-width: 68ch;
    margin-inline: auto;
  }
}

/* project-management: the four detail-section headlines are long questions; at
   --t-h2 (up to 3.5rem) the headline alone made the sections very tall and
   dwarfed the photos beside them. Step them down to the --t-h3 scale. */
#engineering-owner .ds-detail__content h2,
#keeping-it-honest .ds-detail__content h2,
#fat-sat-launch .ds-detail__content h2,
#project-recovery .ds-detail__content h2 {
  font-size: var(--t-h3);
}
/* Planning cards: reserve a uniform heading height so every body starts on the
   same line. The third card adds an empty line before its cross-link (in the
   markup) so the link drops to align with the first card's last line. */
#planning-services .card h3 {
  min-height: 2.6em;   /* fallback for browsers without the lh unit */
  min-height: 2lh;
}

/* Inline explainer graphic (Claude Design handover, static SVG) in a detail
   section. It's portrait, transparent, and floats on a drop-shadow, so its slot
   must NOT clip it the way the image slot does (design.css clips + rounds it). */
.ds-detail__visual--bare {
  overflow: visible;
  border-radius: 0;
}

/* Photos dropped into a detail visual slot: the global img rule sets
   max-width:100% but not height:auto, so a width/height-attributed photo gets
   its width shrunk to the column while the height stays pinned — squashing it
   vertically. Restore height:auto so the photo keeps its real aspect ratio
   (it can sit a little shorter than the text column; the grid centers it). */
.ds-detail__visual img {
  width: 100%;
  height: auto;
}
.svc-explainer {
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
  margin-inline: auto;
  filter:
    drop-shadow(0 22px 38px rgba(74, 155, 209, 0.22))
    drop-shadow(0 8px 14px rgba(15, 23, 42, 0.08));
}
.svc-explainer .mono { font-family: var(--f-mono); }

/* Planning page: enlarge the three detail-section graphics a touch (scoped so
   the process-engineering explainers keep their existing size). */
#why-projects-fail .svc-explainer,
#what-a-plan-includes .svc-explainer,
#standardize-and-sequence .svc-explainer {
  max-width: 520px;
}

/* Vertically center each graphic within its detail cell. The grid's
   align-items:center already centers the cell, but the cell is also made to
   fill the row and center its child here so the graphic stays centered against
   the (taller) text column even if the cell is ever stretched. */
#why-projects-fail .ds-detail__visual,
#what-a-plan-includes .ds-detail__visual,
#standardize-and-sequence .ds-detail__visual {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero graphic variant (a static SVG used in the hero media slot in place of a
   photo). Transparent + drop-shadow, so it floats; sized to the hero column. */
.svc-hero__graphic {
  display: block;
  width: 100%;
  max-width: 540px;
  height: auto;
  margin-inline: auto;
  filter:
    drop-shadow(0 22px 38px rgba(74, 155, 209, 0.22))
    drop-shadow(0 8px 14px rgba(15, 23, 42, 0.08));
}
.svc-hero__graphic .mono { font-family: var(--f-mono); }
.svc-hero__graphic .sans { font-family: var(--f-display); }

/* =============================================================================
   FAQ — full-width question + disclosure accordions (compact). The dividers and
   summaries span the full container width (not the old left-column ds-detail).
   ============================================================================= */
.faq-list {
  margin-top: var(--sp-5);
}
.faq-item {
  border-top: 1px solid var(--c-line);
}
.faq-item:last-child {
  border-bottom: 1px solid var(--c-line);
}
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  color: var(--c-ink);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  flex: none;
  font-weight: 400;
  font-size: 1.6em;
  line-height: 0.7;
  color: var(--c-accent);
}
.faq-item[open] > summary::after { content: "\2212"; }  /* minus */
.faq-item__answer {
  padding: 0 0 var(--sp-3);
}
.faq-item__answer p {
  margin: 0;
  max-width: 80ch;
  color: var(--c-ink-2);
  font-size: var(--t-body);
  line-height: 1.6;
}

/* =============================================================================
   Closing contact CTA — DARK band (see section-alternation audit). A dark band
   always separates from the section above it regardless of page parity, and is
   consistent across every subpage. It hosts the same Talk-to-an-Engineer form
   as the home page; .cta-form styles live here so the form is styled without
   loading index.css. design.css already whitens the #contact h2/p on a dark
   band — here we widen the band and lighten the (light-styled) form labels +
   helper text. The white input fields read fine on the dark band as-is.
   ============================================================================= */
/* Widen the contact band so the headline uses more horizontal space (the
   default 680px forces it onto 3 cramped lines). The paragraph (52ch) and the
   form (540px) keep their own narrower max-widths and stay centered. */
#contact.section--dark .cta-band__inner {
  max-width: 56rem;
  /* The band has no .container, so add the page gutter here — otherwise the
     (left-aligned, on mobile) eyebrow/headline/body touch the screen edge. */
  padding-inline: var(--gutter);
}
#contact.section--dark .eyebrow { color: var(--c-accent); }
#contact.section--dark .cta-form__label { color: var(--c-on-dark-2); }
#contact.section--dark .cta-form__check,
#contact.section--dark .cta-form__status { color: var(--c-on-dark-2); }

/* Light contact band — still used by the Integrator Services MAIN page (the
   svc subpages all use the dark band above). Override design.css's dark #contact
   text to dark ink, and widen the band the same way. */
#contact.section--alt .cta-band__inner h2 { color: var(--c-ink); }
#contact.section--alt .cta-band__inner p { color: var(--c-ink-2); }
#contact.section--alt .cta-band__inner {
  max-width: 56rem;
  padding-inline: var(--gutter);
}

.cta-form {
  margin: var(--sp-5) auto 0;
  max-width: 540px;
  text-align: left;
}
.cta-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.cta-form__field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cta-form__label {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink-2);
}
.cta-form input:not([type="checkbox"]) {
  width: 100%;
  padding: 0.72rem 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--c-ink);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  -webkit-appearance: none;
  appearance: none;
}
.cta-form input::placeholder { color: var(--c-ink-3); }
.cta-form input:not([type="checkbox"]):focus {
  outline: none;
  border-color: var(--c-accent-ink);
  box-shadow: 0 0 0 3px rgba(27, 118, 181, 0.16);
}
.cta-form__submit { width: 100%; }
.cta-form__group {
  border: 0;
  margin: 0 0 var(--sp-3);
  padding: 0;
}
.cta-form__group legend {
  margin-bottom: 9px;
  padding: 0;
}
.cta-form__check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--c-ink);
  cursor: pointer;
}
.cta-form__check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--c-accent-ink);
  cursor: pointer;
}
.cta-form__status {
  margin: var(--sp-3) 0 0;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;
}
.cta-form__status--ok { color: #1a7f37; font-weight: 600; }
.cta-form__status--error { color: #b42318; }
.cta-form__status a { color: inherit; }

@media (max-width: 560px) {
  .cta-form__row { grid-template-columns: 1fr; }
}

/* =============================================================================
   "PART OF" cross-link band. The .crosslink-band styles aren't loaded on these
   subpages (they live in the integrator page CSS), so style it here: a centered
   intro above a full-width graphic.
   ============================================================================= */
.crosslink-band {
  text-align: left;
}
/* Content block matches the graphic's max width below it, so the headline and
   body align with the graphic's left and right edges. */
.crosslink-band__content {
  max-width: 1000px;
  margin-inline: auto;
}
.crosslink-band__content .eyebrow {
  display: block;
  margin-bottom: var(--sp-2);
}
.crosslink-band__content h2 {
  font-size: var(--t-h2);
}
.crosslink-band__content p {
  margin-top: var(--sp-3);
  color: var(--c-ink-2);
}
.crosslink-band__visual {
  margin-top: var(--sp-5);
  overflow: visible;  /* don't clip the graphic's drop-shadow */
}
/* Placeholder (still on the sibling subpages) — keep it bounded and centered. */
.crosslink-band__placeholder {
  max-width: 720px;
  margin-inline: auto;
}
/* Wide PLAN → STANDARDIZE → LAUNCH flow graphic (3:1). */
.svc-flow-graphic {
  display: block;
  width: 100%;
  max-width: 1000px;
  height: auto;
  margin-inline: auto;
  filter:
    drop-shadow(0 22px 38px rgba(74, 155, 209, 0.22))
    drop-shadow(0 8px 14px rgba(15, 23, 42, 0.08));
}
.svc-flow-graphic .mono { font-family: var(--f-mono); }
.svc-flow-graphic .sans { font-family: var(--f-display); }

/* The wide (2.45:1) flow graphic gets unreadably small on a phone, so a
   vertical-stacked variant (--v) is shipped alongside the horizontal one (--h).
   Show the horizontal one by default; swap to the vertical one on mobile. */
.svc-flow-graphic--v {
  display: none;
  max-width: 420px;  /* keep the tall variant a sensible size on small tablets */
}
@media (max-width: 768px) {
  .svc-flow-graphic--h { display: none; }
  .svc-flow-graphic--v { display: block; }
}

/* Stack content over image on tablet/mobile so neither column gets cramped. */
/* When the detail grid stacks (<=1024px), design.css forces every reversed
   section's graphic ABOVE its text (order:-1). On the manufacturer subpages we
   always want text first, then the graphic — natural reading order. (This sheet
   only loads on those subpages, so it doesn't affect design.html.) */
@media (max-width: 1024px) {
  .ds-detail--reverse .ds-detail__visual {
    order: 0;
  }
}

@media (max-width: 900px) {
  .svc-hero {
    grid-template-columns: 1fr;
  }
  .svc-hero__media {
    margin-top: var(--sp-5);
  }
}

@media (max-width: 768px) {
  /* Hide the accent line on mobile — as a full-width bottom bar it read like
     an unwanted divider between the hero and the next section. */
  .svc-hero__accent-line {
    display: none;
  }
  .svc-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
  }
  /* Drop the hero image on mobile: stacked it adds a full extra screen of
     scroll below the text. Text-only reads cleaner; min-height:auto keeps the
     hero compact instead of a half-empty 100svh box. */
  .svc-hero__media { display: none; }
  .svc-hero { min-height: auto; }
  /* The inner switches to left-aligned (justify-items:start) on mobile; make
     the form fill the width and align with the text instead of centering. */
  #contact.section--alt .cta-form {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}