/* ============================================================
   Mother Social — Divi bridge layer
   Re-styles Divi's own structure (page background, sections,
   rows, buttons, images) so native Divi modules sit inside the
   design system cleanly. Loaded after site.css + pages.css.

   Helper classes you assign in a module's Advanced > CSS Class:
     ms-section          section with the big vertical rhythm
     ms-section--tight   section with the tighter rhythm
     ms-flush            section/row with no Divi padding (hero, marquee, contact)
     ms-row              row constrained like .container (max 1320 + gutter)
     ms-bleed            row that runs full-bleed (marquees)
     ms-media            Image module styled as a rounded media box (16:9)
     ms-media--4x3 / --5x4   alternate aspect ratios
   ============================================================ */

/* ---- Page canvas: force the ink background over Divi's customizer default ---- */
html, body { background-color: var(--ink) !important; }
#page-container, #et-main-area, #main-content { background: transparent; }
body { font-family: var(--font-ui) !important; color: var(--paper); }

/* Divi wraps the whole page; keep horizontal overflow contained for marquees. */
#page-container { overflow-x: hidden; }

/* ---- Sections ---- */
.et_pb_section.ms-section { padding-top: clamp(80px, 12vw, 200px); padding-bottom: clamp(80px, 12vw, 200px); background: transparent; }
.et_pb_section.ms-section--tight { padding-top: clamp(56px, 8vw, 120px); padding-bottom: clamp(56px, 8vw, 120px); background: transparent; }
.et_pb_section.ms-flush { padding: 0 !important; background: transparent; }

/* ---- Rows: ms-row behaves like .container; ms-bleed runs full width ---- */
.et_pb_row.ms-row {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 0 var(--gutter);
}
.et_pb_row.ms-bleed {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
/* Single-column rows: kill Divi's per-column bottom margin and module gaps so
   the design system's own margins control spacing exactly. */
.ms-row .et_pb_column { margin-bottom: 0; width: 100%; }
.ms-row .et_pb_module { margin-bottom: 0; }
.ms-bleed .et_pb_column { margin-bottom: 0; width: 100%; }

/* Code modules carry our exact HTML; no Divi chrome around them. */
.et_pb_code.ms-code, .ms-row .et_pb_code { background: transparent; }

/* ---- Buttons: let our .btn system win over Divi's button defaults ---- */
.et_pb_button.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 16px 26px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--paper);
  background: transparent;
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.et_pb_button.btn:hover { transform: translateY(-2px); border-color: var(--paper); padding: 16px 26px; }
.et_pb_button.btn::after, .et_pb_button.btn::before { display: none !important; content: "" !important; }
.et_pb_button.btn .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); transition: transform .4s var(--ease); }
.et_pb_button.btn:hover .dot { transform: scale(1.6); }
.et_pb_button.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.et_pb_button.btn--accent .dot { background: var(--ink); }
.et_pb_button.btn--accent:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.et_pb_button.btn--lg { padding: 20px 34px; font-size: 14px; }
.et_pb_button.btn--lg:hover { padding: 20px 34px; }
/* Hosts a row of buttons with the prototype's spacing. */
.ms-actions .et_pb_button { margin: 0; }

/* ---- Image modules styled as the design's media boxes ---- */
.ms-media .et_pb_image_wrap {
  display: block; width: 100%;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); background: var(--ink-2);
  aspect-ratio: 16 / 9;
}
.ms-media .et_pb_image_wrap img,
.ms-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-media--4x3 .et_pb_image_wrap { aspect-ratio: 4 / 3; }
.ms-media--5x4 .et_pb_image_wrap { aspect-ratio: 5 / 4; }
.ms-media { margin: 0 !important; }

/* ---- Services detail blocks built as a Divi 2-column row (text | visual) ---- */
.ms-sd .et_pb_column { display: flex; flex-direction: column; justify-content: center; }
.ms-sd .sd__num { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.16em; color: var(--accent); }
.ms-sd .sd__title { margin: 18px 0 24px; }
.ms-sd .sd__list { margin: 0; }
/* The big outline number visual sits flush right like the prototype. */
.ms-sd .sd__index { text-align: left; }

/* Border above the services contact block (matches the prototype). */
.ms-contact-top { border-top: 1px solid var(--line); }

/* ---- Process: native Divi Blurbs styled as the design's .step cards ---- */
.process-grid { counter-reset: msstep; }
.process-grid .et_pb_column { margin: 0 !important; }
.step.et_pb_blurb {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(28px, 3vw, 44px);
  min-height: 340px;
  display: flex; flex-direction: column; justify-content: flex-start;
  transition: background .5s var(--ease);
}
.step.et_pb_blurb:hover { background: var(--ink-3); }
.step.et_pb_blurb::before {
  counter-increment: msstep;
  content: "0" counter(msstep);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.14em; color: var(--accent);
}
.step .et_pb_main_blurb_image { display: none; }
.step .et_pb_blurb_content { width: 100%; max-width: 100%; padding: 0; margin: 0; }
.step .et_pb_blurb_container { padding: 0; }
.step .et_pb_module_header,
.step .et_pb_module_header a {
  font-family: var(--font-display); font-weight: 900; font-variation-settings: var(--wonk);
  font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.03em; line-height: 0.95;
  color: var(--paper); padding: 0; margin: 0;
}
.step .et_pb_blurb_description { color: var(--muted); font-size: 14px; margin-top: 16px; }
.step .et_pb_blurb_description * { color: inherit; }

/* ---- FAQ: native Divi Accordion styled as the design's .faq list ---- */
.faq.et_pb_accordion { border-top: 1px solid var(--line); }
.faq.et_pb_accordion .et_pb_toggle,
.faq.et_pb_accordion .et_pb_toggle_open,
.faq.et_pb_accordion .et_pb_toggle_close {
  background: transparent !important;
  border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; box-shadow: none;
  padding: clamp(22px, 2.6vw, 34px) 0; margin: 0;
}
.faq .et_pb_toggle_title {
  font-family: var(--font-display); font-weight: 900; font-variation-settings: 'opsz' 60, 'SOFT' 40, 'WONK' 1;
  font-size: clamp(22px, 2.8vw, 40px); letter-spacing: -0.03em; line-height: 1.05;
  color: var(--paper); cursor: pointer;
  padding: 0 64px 0 0; margin: 0;
  transition: color .3s var(--ease);
}
.faq .et_pb_toggle_title:hover { color: var(--accent); }
/* Divi's open/close glyph -> accent, pinned right like the prototype's +/- icon. */
.faq .et_pb_toggle_title::before {
  color: var(--accent) !important;
  left: auto !important; right: 0 !important;
  top: 50% !important; transform: translateY(-50%);
  font-size: 28px; line-height: 1;
}
.faq .et_pb_toggle_content {
  color: var(--muted); font-family: var(--font-ui); font-size: 17px; line-height: 1.55;
  max-width: 64ch; padding-top: 10px;
}
.faq .et_pb_toggle_content * { color: inherit; }

/* ============================================================
   Responsive polish (mobile + tablet)
   ============================================================ */
@media (max-width: 980px) {
  /* Process step cards stack full-width on tablet/phone: drop the tall
     fixed height so the number sits right above its title instead of
     leaving a big gap. */
  .step.et_pb_blurb {
    min-height: auto;
    justify-content: flex-start;
    gap: 14px;
    padding: 30px 26px;
  }
  .step .et_pb_blurb_description { margin-top: 6px; }

  /* Services detail: when the 2-column row stacks, put the visual under the
     text with comfortable spacing and don't let the big outline number run off. */
  .ms-sd .et_pb_column { justify-content: flex-start; }
  .ms-sd .sd__index { font-size: clamp(96px, 30vw, 200px); }
}

@media (max-width: 720px) {
  /* Guard against any wide child forcing horizontal scroll on small phones. */
  #page-container, body { overflow-x: hidden; }
  .step.et_pb_blurb { min-height: auto; }
}

/* ---- Native Text modules used for eyebrows/leads inherit the design classes
   (eyebrow, lead, etc.) directly, but Divi forces its own font/colour on the
   inner wrapper, so re-assert through .et_pb_text. ---- */
.et_pb_text.eyebrow { color: var(--muted); }
.et_pb_text.lead, .et_pb_text.lead p { color: var(--muted); font-size: clamp(18px, 2vw, 24px); line-height: 1.5; }
.et_pb_text.lead strong { color: var(--paper); }
.et_pb_text p:last-child { margin-bottom: 0; }

/* ---- Image placeholder used inside Code modules (reel, work cards, service
   visuals). Swap by replacing the .ms-slot's contents with <img src="URL">. ---- */
.ms-slot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--ink-2); overflow: hidden;
}
.ms-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-slot__cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); padding: 16px; }
/* Mirror the design's hover-zoom that targeted the work-card image. */
.work-card__media .ms-slot { transition: transform .8s var(--ease); }
.work-card:hover .work-card__media .ms-slot { transform: scale(1.04); }