/* ==========================================================================
   COMPONENTS — reusable pieces. Every value comes from tokens.css.
   Structures mirror the Onum theme's own class intent so the visual result
   matches the live site rather than approximating it.
   ========================================================================== */

/* ===================== BUTTON =====================
   From .octf-btn: pill radius, bold Red Hat Display, and a large offset
   accent-tinted shadow. That shadow is the theme's signature — keep it. */
.btn {
  display: inline-block;
  padding: var(--btn-pad);
  font-family: var(--f-display);
  font-size: var(--btn-fs);
  font-weight: var(--fw-bold);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease),
              background var(--t-base) var(--ease);
}
.btn:hover {
  color: var(--btn-fg);
  transform: translateY(-2px);
  box-shadow: 6px 6px 16px 0 rgba(254, 76, 28, .38);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  color: #fff;
  background: transparent;
  border-color: rgba(255, 255, 255, .55);
  box-shadow: none;
}
.btn--ghost:hover { background: rgba(255, 255, 255, .12); box-shadow: none; }

.btn--block { display: block; width: 100%; }

/* ===================== EYEBROW =====================
   .ot-heading .sub-heading: 14px bold uppercase, colour #a5b7d2, 21px left
   padding to clear a 7px dot marker. On dark sections the dot turns cyan. */
.eyebrow {
  position: relative;
  display: inline-block;
  margin-bottom: var(--s-4);
  padding-left: 21px;
  font-family: var(--f-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-line);
}
.eyebrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  background: var(--c-line);
  border-radius: 50%;
}
.section--dark .eyebrow,
.text-light .eyebrow { color: rgba(255, 255, 255, .72); }
.section--dark .eyebrow::before,
.text-light .eyebrow::before { background: #00c3ff; }

/* ===================== SECTION HEADING =====================
   Live headings use a hard line break mid-phrase ("We're on a Mission to /
   Increase Your Brand Awareness"). <br> is content, not styling, so it lives
   in the markup — this just makes sure it collapses sensibly on mobile. */
.section-heading {
  margin-bottom: var(--s-5);
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
}
.section--dark .section-heading { color: #fff; }

@media (max-width: 767px) {
  .section-heading br { display: none; }
}

/* ===================== NUMBERED FEATURE CARD =====================
   Home §2 and About §4. A 72px watermark numeral in #f0f6ff sits behind the
   title — decorative, so it is aria-hidden in the markup. */
.numcard {
  position: relative;
  padding: 38px 35px 35px 30px;   /* CONFIRMED from Elementor 2277 */
  background: var(--c-surface);
  border-radius: var(--r-md);
  overflow: hidden;
}
.numcard__num {
  position: absolute;
  top: -8px;
  right: 12px;
  font-family: var(--f-display);
  font-size: var(--fs-bignum);
  font-weight: var(--fw-heading);
  line-height: 1;
  color: var(--c-brand-light);
  pointer-events: none;
  user-select: none;
}
.numcard__title {
  position: relative;
  z-index: 1;
  margin-bottom: 12px;            /* CONFIRMED */
  font-size: var(--fs-h5);
  font-weight: var(--fw-heading);
}
.numcard__body {
  position: relative;
  z-index: 1;
  margin: 0;
  line-height: var(--lh-card);
}
.numcard--caps .numcard__body { text-transform: uppercase; font-size: var(--fs-small); }

/* ===================== SERVICE CARD ===================== */
.scard {
  display: block;
  padding: 45px 27px 40px 27px;   /* CONFIRMED from Elementor 2277 */
  background: var(--c-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.scard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.scard__icon {
  margin-bottom: var(--s-4);
  font-size: var(--fs-cardicon);
  line-height: 1;
  color: var(--c-accent);
}
.scard__icon svg { width: var(--fs-cardicon); height: var(--fs-cardicon); fill: currentColor; }
.scard__title {
  margin-bottom: 12px;
  font-size: var(--fs-h5);
  font-weight: var(--fw-heading);
  color: var(--c-ink);
}
.scard:hover .scard__title { color: var(--c-accent); }
.scard__body { margin: 0; line-height: var(--lh-card); }

/* ===================== BENEFIT ITEM ===================== */
.benefit__title {
  margin-bottom: var(--s-2);
  font-size: var(--fs-h5);
  font-weight: var(--fw-heading);
}
.benefit__body { margin: 0; line-height: var(--lh-card); }

/* ===================== COUNTER ===================== */
.counter-item { text-align: center; }
.counter-item__value {
  font-family: var(--f-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-heading);
  line-height: 1;
  color: var(--c-accent);
}
.counter-item__label {
  margin-top: var(--s-3);
  margin-bottom: 0;
  font-size: var(--fs-h6);
  font-weight: var(--fw-heading);
  color: var(--c-ink);
}
.section--dark .counter-item__label { color: #fff; }

/* ===================== TESTIMONIAL SLIDER ===================== */
.slider { position: relative; }
.slider__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--s-2);
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__slide { scroll-snap-align: start; }

@media (min-width: 768px)  { .slider__track { grid-auto-columns: calc((100% - var(--gutter)) / 2); } }
@media (min-width: 1025px) { .slider__track { grid-auto-columns: calc((100% - 2 * var(--gutter)) / 3); } }

.tcard {
  height: 100%;
  padding: var(--s-6);
  background: var(--c-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.tcard__quote { margin-bottom: var(--s-5); line-height: var(--lh-card); }
.tcard__person { display: flex; align-items: center; gap: var(--s-4); }
.tcard__avatar {
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  border-radius: 50%;
  object-fit: cover;
}
.tcard__name {
  margin: 0;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-ink);
}
.tcard__role { margin: 0; font-size: var(--fs-small); color: var(--c-muted); }

.slider__dots { display: flex; justify-content: center; gap: var(--s-2); margin-top: var(--s-6); }
.slider__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  background: var(--c-line);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.slider__dot.is-active { background: var(--c-accent); transform: scale(1.3); }

/* ===================== BLOG CARD ===================== */
.pcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--c-surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.pcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.pcard__media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__cat {
  position: absolute;
  bottom: var(--s-3);
  left: var(--s-3);
  padding: var(--s-1) var(--s-3);
  font-family: var(--f-display);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: #fff;
  background: var(--c-accent);
  border-radius: var(--r-pill);
}
.pcard__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-5); }
.pcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-3);
  font-size: var(--fs-small);
  color: var(--c-muted);
}
.pcard__meta a { color: var(--c-muted); }
.pcard__meta a:hover { color: var(--c-accent); }
.pcard__title {
  margin-bottom: var(--s-3);
  font-size: var(--fs-h5);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
}
.pcard__title a { color: var(--c-ink); }
.pcard__title a:hover { color: var(--c-accent); }
.pcard__excerpt { margin-bottom: var(--s-4); line-height: var(--lh-card); }
.pcard__more {
  margin-top: auto;
  font-family: var(--f-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-accent);
}

/* ===================== PAGE HERO =====================
   Inner pages use pexels-pixabay-327540.jpg with a dark overlay and centred
   white title — confirmed from theme_mods (pheader_img, ptitle_color). */
.pagehero {
  position: relative;
  padding-block: 150px;           /* CONFIRMED from Elementor 109 */
  text-align: center;
  background: var(--c-ink) center / cover no-repeat;
  isolation: isolate;
}
.pagehero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
  opacity: .65;                   /* CONFIRMED */
}
.pagehero__title {
  margin: 0;
  font-size: var(--fs-hero);
  font-weight: var(--fw-heading);
  color: #fff;
}
.pagehero__crumbs {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  color: var(--c-line);
}
.pagehero__crumbs a { color: var(--c-line); }
.pagehero__crumbs a:hover { color: var(--c-accent); }

@media (max-width: 767px) { .pagehero { padding-block: var(--s-9); } }

/* ===================== CTA BAND ===================== */
.ctaband { padding-block: 60px; text-align: center; background: var(--c-brand-dark); }
.ctaband__title {
  margin-bottom: var(--s-5);
  font-size: var(--fs-cta);
  font-weight: var(--fw-heading);
  color: #fff;
}

/* ===================== FORM ===================== */
.field { margin-bottom: var(--s-5); }
.field__label {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--f-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
.field__label .req { color: var(--c-accent); }

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: var(--s-3) var(--s-4);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  color: var(--c-ink);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 0;
  border-color: var(--c-brand-dark);
  box-shadow: 0 0 0 3px rgba(0, 73, 177, .14);
}
.field textarea { min-height: 140px; resize: vertical; }

.field.has-error input,
.field.has-error textarea { border-color: var(--c-error); }
.field__error {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--c-error);
}

.form__status { margin-top: var(--s-4); font-size: var(--fs-small); }
.form__status.is-success { color: var(--c-success); }
.form__status.is-error   { color: var(--c-error); }
.form__status.is-pending { color: var(--c-muted); }