/* ==========================================================================
   Bold Etik — Service pages (/services and /services/<service>)
   Builds on project.css (intro + related work) and contact.css (FAQ).
   ========================================================================== */

/* ---------- Hero: tune the script word per page ---------- */
.be-svc-hero { width: 100%; --hero-gap-phone: 13px; --hero-desc-w-tablet: 230px; }
.be-svc-hero .be-hero__title .t-hero { margin-right: 0; }
.be-svc-hero--branding  { --hero-script-w: 270px; --hero-script-h: 112px; --hero-script-x: 0px; --hero-script-y: 4px; }
.be-svc-hero--web       { --hero-script-w: 270px; --hero-script-h: 112px; --hero-script-x: 0px; --hero-script-y: 4px; }
.be-svc-hero--marketing { --hero-script-w: 390px; --hero-script-h: 112px; --hero-script-x: 0px; --hero-script-y: 4px; }
.be-svc-hero--hub       { --hero-script-w: 330px; --hero-script-h: 112px; --hero-script-x: 0px; --hero-script-y: 4px; }
@media (max-width: 1199.98px) {
  .be-svc-hero--branding  { --hero-script-w: 186px; --hero-script-h: 64px; --hero-script-y: -4px; }
  .be-svc-hero--web       { --hero-script-w: 186px; --hero-script-h: 64px; --hero-script-y: -4px; }
  .be-svc-hero--marketing { --hero-script-w: 270px; --hero-script-h: 64px; --hero-script-y: -4px; }
  .be-svc-hero--hub       { --hero-script-w: 228px; --hero-script-h: 64px; --hero-script-y: -4px; }
}
@media (max-width: 809.98px) {
  .be-svc-hero .be-hero__script { width: auto; height: auto; }
  .be-svc-hero .be-hero__script span { position: relative; left: auto; bottom: auto; }
}

/* ---------- Intro (layout from project.css) ---------- */
.be-svc .be-case { padding-bottom: 120px; }
.be-svc .be-case__summary { gap: 40px; }
.be-svc .be-case__lead .t-h3 { max-width: 620px; }
.be-svc .be-case__lead .be-svc-text { max-width: 560px; }
@media (max-width: 1199.98px) {
  .be-svc .be-case__summary { height: auto; }
}

/* Website screenshot shown inside a dark frame instead of cropped */
.be-svc-device {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: var(--be-ink);
}
.be-svc-device picture { display: block; width: 100%; }
.be-svc-device img { width: 100%; height: auto; border-radius: 8px; object-fit: contain; }

/* ---------- Shared section frame ---------- */
.be-svc-section {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
  max-width: 1400px;
  padding-bottom: 150px;
}
.be-svc-section--card {
  max-width: none;
  align-items: center;
  padding: 100px 20px;
  margin-bottom: 10px;
  border-radius: 20px;
  background: var(--be-surface);
}
.be-svc-section--card > * { width: 100%; max-width: 1400px; }
.be-svc-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.be-svc-section__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.be-svc-section__title { max-width: 720px; color: var(--be-grey); }
.be-svc-section__title span { color: var(--be-ink); }
.be-svc-section__aside { max-width: 380px; color: var(--be-ink-60); }

/* Readable body copy for longer service text */
.be-svc-text { font: 500 17.6px/1.5 var(--be-sans); letter-spacing: -0.2px; color: var(--be-ink-60); }
.be-svc-text strong { font-weight: 600; color: var(--be-ink); }
.be-svc-text a { color: var(--be-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.be-svc-text a:hover { color: var(--be-orange); }

/* ---------- What's included ---------- */
.be-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.be-svc-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 260px;
  padding: 30px;
  border-radius: 20px;
  background: var(--be-surface);
}
.be-svc-section--card .be-svc-card { background: var(--be-bg); }
.be-svc-card__num { color: var(--be-orange); }
.be-svc-card h3 { margin-top: auto; }

/* ---------- How we work ---------- */
.be-svc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.be-svc-step { display: flex; flex-direction: column; gap: 14px; padding-top: 24px; border-top: 1px solid var(--be-ink-12); }
.be-svc-step__num { color: var(--be-orange); }
.be-svc-step__tags { color: var(--be-grey); }

/* ---------- Two-column prose ---------- */
.be-svc-prose { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; align-items: start; }
.be-svc-prose__body { display: flex; flex-direction: column; gap: 22px; }

/* ---------- Links to the other services ---------- */
.be-svc-more { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.be-svc-more p { color: var(--be-grey); margin-right: 6px; }

/* ---------- Services hub tiles ---------- */
.be-svc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.be-svc-tile {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--be-surface);
}
.be-svc-tile__media { display: block; height: 340px; overflow: hidden; }
.be-svc-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--be-ease-out); }
.be-svc-tile:hover .be-svc-tile__media img { transform: scale(1.04); }
.be-svc-tile__body { display: flex; flex: 1 0 auto; flex-direction: column; align-items: flex-start; gap: 18px; padding: 30px; }
.be-svc-tile__list { display: flex; flex-direction: column; gap: 8px; color: var(--be-ink-60); }
.be-svc-tile__body .be-button { margin-top: auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
  .be-svc-section { padding-bottom: 100px; gap: 40px; }
  .be-svc-section--card { padding: 80px 10px; }
  .be-svc-grid, .be-svc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .be-svc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .be-svc-prose { grid-template-columns: 1fr; gap: 30px; }
  .be-svc-section__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 809.98px) {
  .be-svc-section { padding-bottom: 80px; gap: 30px; }
  .be-svc-section--card { padding: 60px 10px; }
  .be-svc-grid, .be-svc-tiles, .be-svc-steps { grid-template-columns: 1fr; }
  .be-svc-card { min-height: 0; padding: 24px; }
  .be-svc-device { padding: 14px; }
  .be-svc-tile__media { height: 260px; }
  .be-svc-text { font-size: 16.5px; }
}