/* =====================================================
   Service Spec Template — Coffee Marketing Digital
   Tight one-page format for the Service Catalogue.
   Brand: H1 #d35a00, body #4c4c4c, accent #e09900.
   Fonts: Poppins (display), Open Sans (body), Roboto (UI).
   ===================================================== */

/* SHARED CONTAINER */
.svc {
  font-family: 'Open Sans', sans-serif;
  color: #4c4c4c;
}
.svc-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

/* HERO */
.svc-hero {
  padding: 130px 24px 56px;
  background: linear-gradient(180deg, #faf8f5 0%, #ffffff 100%);
  border-bottom: 1px solid #efe7da;
}
.svc-hero__inner { max-width: 980px; margin: 0 auto; text-align: center; }
.svc-hero__eyebrow {
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-weight: 700; font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; color: #d35a00;
  background: #fff3e8; padding: 6px 14px; border-radius: 4px;
  margin-bottom: 18px;
}
.svc-hero__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: clamp(30px, 4.6vw, 46px);
  color: #4c4c4c; margin: 0 0 14px; line-height: 1.15;
}
.svc-hero__title em { color: #d35a00; font-style: normal; }
.svc-hero__subtitle {
  font-size: 17px; line-height: 1.6; color: #6b6b6b;
  max-width: 720px; margin: 0 auto 26px;
}
.svc-hero__meta {
  display: inline-flex; gap: 16px; flex-wrap: wrap;
  align-items: center; justify-content: center;
}
.svc-hero__price-badge {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: #d35a00; color: #fff; padding: 10px 20px;
  border-radius: 999px; font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: 16px;
}
.svc-hero__price-badge strong { font-size: 22px; }
.svc-hero__price-badge .from { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.85; margin-right: 4px; }
.svc-hero__cta {
  display: inline-block; padding: 12px 22px;
  background: #4c4c4c; color: #fff; font-family: 'Roboto', sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; text-decoration: none; border-radius: 4px;
  transition: background 0.15s, letter-spacing 0.2s;
}
.svc-hero__cta:hover { background: #d35a00; letter-spacing: 2.5px; }

/* TRUST STRIP */
.svc-trust {
  padding: 18px 24px;
  background: #ffffff; border-bottom: 1px solid #efe7da;
}
.svc-trust__inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; gap: 24px; flex-wrap: wrap;
  justify-content: center; align-items: center;
  font-family: 'Roboto', sans-serif; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: #888; font-weight: 600;
}
.svc-trust__item { display: inline-flex; align-items: center; gap: 8px; }
.svc-trust__item i { color: #d35a00; }

/* GENERIC SECTION */
.svc-section { padding: 56px 24px; }
.svc-section--gray { background: #faf8f5; }
.svc-section--dark { background: #4c4c4c; color: #f5f5f5; }
.svc-section--dark .svc-section__title { color: #fff; }
.svc-section--dark .svc-section__intro { color: #d8d8d8; }
/* Bolder orange-accent section — used for OUTCOME, breaks the cream rhythm and reinforces
   the brand orange/gold from hero + final CTA. Subtle radial overlay adds depth. */
.svc-section--orange {
  background: linear-gradient(135deg, #d35a00 0%, #e09900 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.svc-section--orange::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.svc-section--orange .svc-section__inner { position: relative; z-index: 1; }
.svc-section--orange .svc-section__label { background: rgba(255,255,255,0.18); color: #fff; }
.svc-section--orange .svc-section__title { color: #fff; }
.svc-section--orange .svc-outcome {
  background: rgba(255,255,255,0.96); color: #4c4c4c;
  border-left: 5px solid #4c4c4c;
  padding: 28px 32px; border-radius: 6px;
  font-size: 17px; line-height: 1.65;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.svc-section__inner { max-width: 1000px; margin: 0 auto; }
.svc-section__label {
  display: inline-block; font-family: 'Roboto', sans-serif;
  font-weight: 700; font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; color: #d35a00;
  border-left: 4px solid #d35a00; padding-left: 12px;
  margin-bottom: 14px;
}
.svc-section__title {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(24px, 3.4vw, 32px);
  color: #4c4c4c; margin: 0 0 18px; line-height: 1.2;
}
.svc-section__intro {
  font-size: 16px; line-height: 1.65; color: #5b5b5b;
  margin: 0 0 28px; max-width: 780px;
}

/* WHO IS THIS FOR */
.svc-who {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.svc-who__item {
  background: #fff; border: 1px solid #e8e3da;
  border-left: 4px solid #d35a00; border-radius: 4px;
  padding: 18px 20px; font-size: 15px; line-height: 1.5;
}

/* DELIVERABLES (numbered or icon list) */
.svc-deliv {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.svc-deliv__item {
  background: #fff; border: 1px solid #e8e3da; border-radius: 6px;
  padding: 22px 22px 20px; transition: border-color 0.15s, transform 0.15s;
}
.svc-deliv__item:hover { border-color: #e09900; transform: translateY(-2px); }
.svc-deliv__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 8px;
  background: #fff3e8; color: #d35a00; font-size: 18px;
  margin-bottom: 12px;
}
.svc-deliv__title {
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: 16px; color: #4c4c4c; margin: 0 0 6px;
}
.svc-deliv__body {
  font-size: 14px; line-height: 1.55; color: #6b6b6b; margin: 0;
}

/* OUTCOMES */
.svc-outcome {
  background: #fff3e8; border-left: 5px solid #d35a00;
  padding: 22px 28px; border-radius: 4px;
  font-size: 16px; line-height: 1.65; color: #4c4c4c;
}
.svc-outcome p + p { margin-top: 12px; }
.svc-outcome strong { color: #d35a00; }

/* PROCESS */
.svc-process {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  counter-reset: step;
}
.svc-process__step {
  background: #fff; border: 1px solid #e8e3da; border-radius: 6px;
  padding: 22px 20px 20px 60px; position: relative;
  counter-increment: step;
}
.svc-process__step::before {
  content: counter(step);
  position: absolute; left: 18px; top: 18px;
  width: 32px; height: 32px; border-radius: 50%;
  background: #d35a00; color: #fff;
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.svc-process__title {
  font-family: 'Poppins', sans-serif; font-weight: 600;
  font-size: 15px; color: #4c4c4c; margin: 0 0 6px;
}
.svc-process__body {
  font-size: 14px; line-height: 1.55; color: #6b6b6b; margin: 0;
}

/* SAMPLE OUTPUT */
.svc-sample {
  background: #4c4c4c; color: #fff; padding: 56px 24px;
}
.svc-sample__inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.svc-sample__label {
  display: inline-block; font-family: 'Roboto', sans-serif;
  font-weight: 700; font-size: 11px; letter-spacing: 3px;
  text-transform: uppercase; color: #e09900;
  background: rgba(255, 243, 232, 0.1);
  padding: 6px 14px; border-radius: 4px;
  margin-bottom: 14px;
}
.svc-sample__title {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(22px, 3vw, 28px); color: #fff;
  margin: 0 0 12px;
}
.svc-sample__intro {
  font-size: 15px; line-height: 1.65; color: #d8d8d8;
  max-width: 700px; margin: 0 auto 32px;
}
.svc-sample__image {
  display: block; max-width: 920px; width: 100%; margin: 0 auto;
  border-radius: 8px; box-shadow: 0 18px 50px rgba(0,0,0,0.4);
  background: #fff; padding: 12px;
}
.svc-sample__caption {
  font-size: 12px; color: #aaa; margin-top: 16px; font-style: italic;
}

/* PRICING */
.svc-pricing {
  background: #fff3e8;
  border: 1px solid #f3d4b3; border-radius: 8px;
  padding: 32px 32px 36px; max-width: 760px; margin: 0 auto;
  text-align: center;
}
.svc-pricing__from {
  font-family: 'Roboto', sans-serif; font-size: 11px;
  letter-spacing: 3px; text-transform: uppercase;
  color: #d35a00; font-weight: 700; margin: 0 0 6px;
}
.svc-pricing__price {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(40px, 6vw, 56px); color: #4c4c4c;
  line-height: 1; margin: 0 0 12px;
}
.svc-pricing__price small {
  font-size: 16px; color: #888; font-weight: 400; margin-left: 6px;
}
.svc-pricing__lead {
  font-size: 15px; line-height: 1.6; color: #5b5b5b;
  margin: 0 0 18px;
}
.svc-pricing__caveat {
  background: #fff; border-left: 4px solid #e09900;
  padding: 16px 20px; border-radius: 4px;
  text-align: left; margin: 16px 0 22px;
}
.svc-pricing__caveat-title {
  font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px;
  color: #d35a00; margin: 0 0 8px;
  text-transform: uppercase; letter-spacing: 1.5px;
}
.svc-pricing__caveat-list {
  margin: 0; padding-left: 20px; font-size: 14px;
  line-height: 1.6; color: #5b5b5b;
}
.svc-pricing__caveat-list li { margin-bottom: 4px; }
.svc-pricing__caveat-list li strong { color: #4c4c4c; }
.svc-pricing__cta {
  display: inline-block; padding: 14px 28px;
  background: #d35a00; color: #fff; font-family: 'Roboto', sans-serif;
  font-weight: 700; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; text-decoration: none; border-radius: 4px;
  transition: background 0.15s, letter-spacing 0.2s;
}
.svc-pricing__cta:hover { background: #b34a00; letter-spacing: 2.5px; }

/* PRICE MONITOR TIERS (only used by price-monitor page) */
.svc-tiers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; max-width: 1000px; margin: 18px auto 0;
}
.svc-tier {
  background: #fff; border: 1px solid #e8e3da; border-radius: 6px;
  padding: 18px 14px; text-align: center;
}
.svc-tier__name {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
  color: #4c4c4c; margin: 0 0 4px;
}
.svc-tier__price {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  color: #d35a00; font-size: 22px; margin: 4px 0;
}
.svc-tier__pairs {
  font-size: 12px; color: #888; text-transform: uppercase;
  letter-spacing: 1px; font-weight: 600;
}

/* FAQ */
.svc-faq { max-width: 800px; margin: 0 auto; }
.svc-faq__item {
  background: #fff; border: 1px solid #e8e3da; border-radius: 6px;
  margin-bottom: 10px; overflow: hidden;
}
.svc-faq__item summary {
  padding: 18px 22px 18px 22px; cursor: pointer;
  font-family: 'Poppins', sans-serif; font-weight: 600;
  color: #4c4c4c; font-size: 15px; list-style: none;
  position: relative; padding-right: 50px;
}
.svc-faq__item summary::-webkit-details-marker { display: none; }
.svc-faq__item summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%;
  transform: translateY(-50%); font-size: 22px; color: #d35a00;
  font-weight: 400; transition: transform 0.2s;
}
.svc-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.svc-faq__item p {
  padding: 0 22px 20px; color: #5b5b5b;
  line-height: 1.65; font-size: 14px; margin: 0;
}

/* FINAL CTA */
.svc-final {
  background: linear-gradient(135deg, #d35a00 0%, #e09900 100%);
  color: #fff; padding: 64px 24px; text-align: center;
}
.svc-final__title {
  font-family: 'Poppins', sans-serif; font-weight: 700;
  font-size: clamp(24px, 3.2vw, 30px); color: #fff;
  margin: 0 0 12px; max-width: 700px; margin-left: auto; margin-right: auto;
}
.svc-final__intro {
  font-size: 16px; line-height: 1.6; color: #fff; opacity: 0.95;
  max-width: 580px; margin: 0 auto 28px;
}
.svc-final__buttons {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.svc-final__btn {
  display: inline-block; padding: 14px 26px;
  background: #fff; color: #d35a00; font-family: 'Roboto', sans-serif;
  font-weight: 700; font-size: 12px; letter-spacing: 2px;
  text-transform: uppercase; text-decoration: none; border-radius: 4px;
  transition: transform 0.15s, letter-spacing 0.2s;
}
.svc-final__btn:hover { transform: translateY(-2px); letter-spacing: 2.5px; color: #d35a00; }
.svc-final__btn--ghost {
  background: transparent; color: #fff; border: 2px solid #fff;
}
.svc-final__btn--ghost:hover { background: #fff; color: #d35a00; }

/* CROSS-LINK FOOTER */
.svc-related {
  padding: 48px 24px; background: #faf8f5;
  border-top: 1px solid #efe7da;
}
.svc-related__inner {
  max-width: 1100px; margin: 0 auto;
}
.svc-related__heading {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: 2px; text-transform: uppercase; color: #4c4c4c;
  border-left: 4px solid #d35a00; padding-left: 12px;
  margin: 0 0 18px;
}
.svc-related__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.svc-related__card {
  background: #fff; border: 1px solid #e8e3da; border-radius: 6px;
  padding: 18px 20px; text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.svc-related__card:hover { border-color: #d35a00; transform: translateY(-2px); }
.svc-related__card-title {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px;
  color: #d35a00; margin: 0 0 4px;
}
.svc-related__card-body {
  font-size: 13px; line-height: 1.5; color: #6b6b6b; margin: 0;
}

/* DARK MODE OVERRIDES */
[data-theme="dark"] .svc { color: #e8e8e8; }
[data-theme="dark"] .svc-hero { background: linear-gradient(180deg, #0f0f0f 0%, #1a1a1a 100%); }
[data-theme="dark"] .svc-hero__title { color: #f5f5f5; }
[data-theme="dark"] .svc-hero__subtitle { color: #b8b8b8; }
[data-theme="dark"] .svc-section { background: #0f0f0f; }
[data-theme="dark"] .svc-section--gray { background: #1a1a1a; }
/* Orange-accent section keeps its orange gradient in dark mode — brand-orange is the whole point. */
[data-theme="dark"] .svc-section--orange { background: linear-gradient(135deg, #b34a00 0%, #c08000 100%); }
[data-theme="dark"] .svc-section--orange .svc-outcome { background: #1a1a1a; color: #e8e8e8; border-left-color: #e09900; }
[data-theme="dark"] .svc-section__title { color: #f5f5f5; }
[data-theme="dark"] .svc-section__intro { color: #b8b8b8; }
[data-theme="dark"] .svc-who__item,
[data-theme="dark"] .svc-deliv__item,
[data-theme="dark"] .svc-process__step,
[data-theme="dark"] .svc-faq__item,
[data-theme="dark"] .svc-related__card { background: #1a1a1a; border-color: #2a2a2a; color: #e8e8e8; }
[data-theme="dark"] .svc-deliv__title,
[data-theme="dark"] .svc-process__title { color: #f5f5f5; }
[data-theme="dark"] .svc-deliv__body,
[data-theme="dark"] .svc-process__body,
[data-theme="dark"] .svc-faq__item p,
[data-theme="dark"] .svc-related__card-body { color: #b8b8b8; }
[data-theme="dark"] .svc-faq__item summary { color: #f5f5f5; }
[data-theme="dark"] .svc-pricing { background: #1a1a1a; border-color: #3a2a1a; }
[data-theme="dark"] .svc-pricing__price { color: #f5f5f5; }
[data-theme="dark"] .svc-pricing__caveat { background: #0f0f0f; }
[data-theme="dark"] .svc-related { background: #0a0a0a; border-top-color: #2a2a2a; }
[data-theme="dark"] .svc-trust { background: #1a1a1a; border-color: #2a2a2a; }

/* Hamburger nav: child sub-list under "Service Catalogue" parent */
.fullscreen-menu__item--has-children > .fullscreen-menu__link {
  position: relative;
  padding-right: 32px;
}
.fullscreen-menu__item--has-children > .fullscreen-menu__link::after {
  content: "+";
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 300; opacity: 0.6;
  transition: transform 0.2s;
}
.fullscreen-menu__item--has-children.is-open > .fullscreen-menu__link::after {
  transform: translateY(-50%) rotate(45deg);
}
.fullscreen-menu__sub-list {
  list-style: none; margin: 8px 0 0; padding: 0 0 0 24px;
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
}
.fullscreen-menu__item--has-children.is-open .fullscreen-menu__sub-list {
  max-height: 800px;
}
.fullscreen-menu__sub-item { margin: 0 0 6px; }
.fullscreen-menu__sub-link {
  display: block; padding: 6px 0;
  font-family: 'Open Sans', sans-serif; font-weight: 400;
  font-size: 14px; color: rgba(255, 255, 255, 0.85);
  text-decoration: none; transition: color 0.15s;
}
.fullscreen-menu__sub-link:hover { color: #fff; }

/* ======================================================
   Curved wave dividers — matches the live site's gold-form
   pattern. Placed at colour-change boundaries on dark sections.
   ====================================================== */
.svc-sample--with-waves { position: relative; padding-top: 120px; padding-bottom: 120px; }
.svc-wave {
  position: absolute; left: 0; right: 0; height: 100px;
  background-size: 100% 100px; background-repeat: no-repeat;
  pointer-events: none;
}
/* Wave divider geometry: dome with flat TOP, curve at BOTTOM. The wave sits across the section
   boundary; flat edge aligns with the boundary, curved edge drops into the section below.
   Shape colour matches the section ABOVE (so the flat edge blends), transparent area reveals the
   section BELOW (so the curve is silhouetted against contrasting backdrop). */
.svc-wave--top { top: 0; }
.svc-wave--bottom { top: 100%; }

/* Maturity stage block — sits just above pricing.
   Top padding is doubled (96px) to give clear breathing room below the curved sample-section
   wave divider that bleeds into the top of this section. */
.svc-section--maturity {
  background: #faf8f5;
  border-top: 1px solid #efe7da;
  border-bottom: 1px solid #efe7da;
  padding: 96px 24px 48px;
}
[data-theme="dark"] .svc-section--maturity { background: #1a1a1a; border-color: #2a2a2a; }
[data-theme="dark"] .svc-section--maturity p { color: #b8b8b8 !important; }
[data-theme="dark"] .svc-section--maturity em { color: #e09900 !important; }

/* =====================================================================
   Scroll-triggered animations.
   Initial state: invisible + translated; .in-view class (added by main.js
   IntersectionObserver) restores to final position. Reduced-motion users
   skip animation (handled by JS). Stagger: 80ms delay per child.
   ===================================================================== */
.scroll-animate--fade-up,
.scroll-animate--fade-left,
.scroll-animate--fade-right,
.scroll-animate--scale {
  opacity: 0;
  transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: opacity, transform;
}
.scroll-animate--fade-up { transform: translateY(28px); }
.scroll-animate--fade-left { transform: translateX(-28px); }
.scroll-animate--fade-right { transform: translateX(28px); }
.scroll-animate--scale { transform: scale(0.96); }
.scroll-animate--fade-up.in-view,
.scroll-animate--fade-left.in-view,
.scroll-animate--fade-right.in-view,
.scroll-animate--scale.in-view {
  opacity: 1;
  transform: none;
}

/* Stagger children: each direct child fades up with a small delay.
   Applied to .svc-who, .svc-deliv, .svc-process, .svc-faq. */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.stagger-children.in-view > * { opacity: 1; transform: none; }
.stagger-children.in-view > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children.in-view > *:nth-child(2) { transition-delay: 80ms; }
.stagger-children.in-view > *:nth-child(3) { transition-delay: 160ms; }
.stagger-children.in-view > *:nth-child(4) { transition-delay: 240ms; }
.stagger-children.in-view > *:nth-child(5) { transition-delay: 320ms; }
.stagger-children.in-view > *:nth-child(6) { transition-delay: 400ms; }
.stagger-children.in-view > *:nth-child(7) { transition-delay: 480ms; }
.stagger-children.in-view > *:nth-child(8) { transition-delay: 560ms; }
@media (prefers-reduced-motion: reduce) {
  .scroll-animate--fade-up,
  .scroll-animate--fade-left,
  .scroll-animate--fade-right,
  .scroll-animate--scale,
  .stagger-children > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* PLATFORM-LOGOS spacing tweak when used on service pages — slightly tighter
   than homepage because it sits between FAQ and Final CTA. */
.svc-final + .platform-logos,
.svc-related + .platform-logos { padding-top: 56px; padding-bottom: 56px; }