/* ==========================================================================
   LAYOUT — page-level section geometry.
   Section paddings and background shapes come straight from the Elementor
   data of page 2277 (home); noted per rule.
   ========================================================================== */

/* ===================== HOME HERO =====================
   Elementor: section bg pexels-christina-morillo-1181396.jpg, padding 150/150,
   white 48px heading + Get Quote button. */
.hero {
  position: relative;
  padding-block: 150px;
  text-align: center;
  background: var(--c-ink) url("../img/pexels-christina-morillo-1181396.jpg") center / cover no-repeat;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
  opacity: .55;
}
.hero__title {
  margin-bottom: var(--s-6);
  font-size: var(--fs-hero);
  font-weight: var(--fw-heading);
  color: #fff;
}
.btn .flaticon-right-arrow-1 { margin-left: 8px; font-size: 14px; }

@media (max-width: 1024px) { .hero { padding-block: 110px; } }
@media (max-width: 767px)  { .hero { padding-block: 80px; } }

/* ===================== NUMBERED CARD ROW (home §2) =====================
   Elementor: section padding 0 bottom 110, three columns. The cards ride up
   over the hero's bottom edge on the live site via negative margin. */
.numrow { padding-bottom: 110px; }
.numrow__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin-top: -60px;               /* overlap onto hero */
  position: relative;
  z-index: 2;
}
.numrow .numcard { box-shadow: var(--shadow-md); }

@media (max-width: 1024px) { .numrow__grid { grid-template-columns: 1fr; margin-top: -40px; } }

/* ===================== SPLIT SECTIONS (image + text) =====================
   Mission: bg-shape1-home5.png, padding 50/60.
   Benefits: bg-shape2-home5.png. */
.split {
  padding-block: 50px 60px;
  background: url("../img/bg-shape1-home5.png") left top no-repeat;
}
.split--benefits { background: url("../img/bg-shape2-home5.png") right top no-repeat; }

.split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: center;
}
.split__media img { border-radius: var(--r-md); }

.benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6) var(--gutter);
  margin-top: var(--s-6);
}
.benefit .scard__icon { color: var(--c-accent); font-size: var(--fs-cardicon); margin-bottom: var(--s-3); }

@media (max-width: 1024px) {
  .split__grid { grid-template-columns: 1fr; }
  .split__media { order: -1; }
}
@media (max-width: 767px) { .benefit-grid { grid-template-columns: 1fr; } }

/* ===================== CTA BAND =====================
   Elementor: outer section bgc #0049B1 + bg-team-home5.png, inner column
   bg-block-1.jpg (S3 — see SESSION-CONTEXT install list). */
.ctaband {
  padding: 0;
  background: var(--c-brand-dark) url("../img/bg-team-home5.png") center / cover no-repeat;
}
.ctaband__card {
  padding: 60px var(--s-6);
  text-align: center;
  background: url("../img/bg-block-1.jpg") center / cover no-repeat;
  border-radius: 0;
}

/* ===================== SERVICES (home §6) =====================
   Elementor: bg-shape3-home5.png, padding 50/50. 2 cards | image | 2 cards. */
.services-home {
  padding-block: 50px;
  background: url("../img/bg-shape3-home5.png") right bottom no-repeat;
}
.services-home__title {
  margin-bottom: var(--s-7);
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
}
.services-home__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: var(--gutter);
  align-items: center;
}
.services-home__col { display: grid; gap: var(--gutter); }
.services-home__media img { border-radius: var(--r-md); }

@media (max-width: 1024px) {
  .services-home__grid { grid-template-columns: 1fr 1fr; }
  .services-home__media { display: none; }
}
@media (max-width: 767px) { .services-home__grid { grid-template-columns: 1fr; } }

/* ===================== PROGRESS BAND (home §7) =====================
   Elementor: iprogress widgets, bar_style "circle", on #0049B1 with
   bg-progress-home5.png, padding 50/50. Rings animate via main.js. */
.progress-band {
  padding-block: 50px;
  background: var(--c-brand-dark) url("../img/bg-progress-home5.png") center / cover no-repeat;
}
.progress-band__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
.ring { text-align: center; color: #fff; }
.ring__svg { width: 150px; height: 150px; }
.ring__track  { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 8; }
.ring__value  {
  fill: none;
  stroke: #fff;
  stroke-width: 8;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.ring__pct {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: var(--fw-heading);
  fill: #fff;
}
.ring__label {
  margin-top: var(--s-4);
  font-family: var(--f-display);
  font-size: var(--fs-h6);
  font-weight: var(--fw-heading);
  color: #fff;
}
@media (max-width: 767px) { .progress-band__grid { grid-template-columns: 1fr; gap: var(--s-7); } }

/* ===================== TESTIMONIALS SECTION ===================== */
.testimonials { padding-block: var(--section-y); }
.testimonials .eyebrow,
.testimonials .section-heading { text-align: center; display: block; }

/* ===================== BLOG GRID (home §9 + daily-buzz) =====================
   Elementor heading + divider + ipost_grid, 3 columns. */
.buzz { padding-block: var(--section-y); background: var(--c-surface-alt); }
.buzz__title {
  text-align: center;
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
}
.buzz__divider {
  width: 54px;
  height: 3px;
  margin: var(--s-4) auto var(--s-8);
  background: var(--c-accent);
  border: 0;
}
.buzz__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
}
@media (max-width: 1024px) { .buzz__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px)  { .buzz__grid { grid-template-columns: 1fr; } }

/* ===================== GENERIC CONTENT PAGE ===================== */
.page-body { padding-block: var(--section-y); }
.page-body .container > h2 { margin-top: var(--s-7); }
.page-body .container > h2:first-child { margin-top: 0; }

/* ==========================================================================
   INNER PAGES — geometry from Elementor data per page
   ========================================================================== */

/* Page heroes: each page sets its bg via a modifier class. Paddings and
   title sizes per Elementor. */
.pagehero--about    { background-image: url("../img/pexels-pixabay-327540.jpg");        padding-block: 200px; }
.pagehero--services { background-image: url("../img/pexels-energepiccom-288477.jpg");   padding-block: 150px; }
.pagehero--contact  { background-image: url("../img/pexels-pixabay-39284.jpg");         padding-block: 150px; }
.pagehero--webdev   { background-image: url("../img/pexels-vojtech-okenka-392018-1.jpg"); padding-block: 170px; }
.pagehero--smo      { background-image: url("../img/pexels-cristian-dina-1851415.jpg"); padding-block: 170px; }
.pagehero--seo      { background-image: url("../img/pexels-dominika-roseclay-905163.jpg"); padding-block: 170px; }
.pagehero--ppc      { background-image: url("../img/ppc.jpg");                          padding-block: 170px; }
.pagehero--about .pagehero__title  { font-size: 54px; }
.pagehero--webdev .pagehero__title,
.pagehero--smo .pagehero__title,
.pagehero--seo .pagehero__title,
.pagehero--ppc .pagehero__title    { font-size: 58px; }
@media (max-width: 1024px) {
  .pagehero--about, .pagehero--webdev, .pagehero--smo, .pagehero--seo, .pagehero--ppc { padding-block: 120px; }
  .pagehero--about .pagehero__title, .pagehero--webdev .pagehero__title, .pagehero--smo .pagehero__title,
  .pagehero--seo .pagehero__title, .pagehero--ppc .pagehero__title { font-size: var(--fs-h1); }
}
@media (max-width: 767px) {
  .pagehero--about, .pagehero--services, .pagehero--contact,
  .pagehero--webdev, .pagehero--smo, .pagehero--seo, .pagehero--ppc { padding-block: 80px; }
}

/* About: tinted numbered-card strip + process section */
.strip { background: var(--c-surface-alt); }
.strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  padding-block: 0 75px;
}
.strip__grid .numcard { background: transparent; padding-top: 40px; }
@media (max-width: 1024px) { .strip__grid { grid-template-columns: 1fr; padding-bottom: 50px; } }

.process {
  padding-block: 100px 120px;
  background: url("../img/shape-process-1.png") center top no-repeat;
}
.process .section-heading { text-align: center; }
.process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  margin-top: var(--s-8);
}
.pbox { position: relative; text-align: center; padding-inline: var(--s-4); }
.pbox__icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 110px;
  height: 110px;
  margin-bottom: var(--s-5);
  background: var(--c-surface);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  font-size: 44px;
  color: var(--c-accent);
}
.pbox__icon img { width: 54px; height: auto; }
.pbox__num {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-family: var(--f-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-heading);
  color: #fff;
  background: var(--c-accent);
  border-radius: 50%;
}
.pbox__title { font-size: var(--fs-h5); font-weight: var(--fw-heading); margin-bottom: var(--s-3); }
.pbox__des { margin: 0; line-height: var(--lh-card); }
.pbox--caps .pbox__des { text-transform: uppercase; font-size: var(--fs-small); }
/* connecting arrows between steps (theme graphics) */
.pbox::after {
  content: "";
  position: absolute;
  top: 42px;
  right: calc(-1 * var(--gutter) + 4px);
  width: 60px;
  height: 28px;
  background: url("../img/p-arrow1.png") center / contain no-repeat;
}
.pbox:nth-child(2)::after { background-image: url("../img/p-arrow2-1.png"); }
.pbox:last-child::after { display: none; }
@media (max-width: 1024px) {
  .process__grid { grid-template-columns: 1fr; gap: var(--s-8); }
  .pbox::after { display: none; }
}

/* Service pages */
.service-intro { padding-block: 40px 30px; }
.service-what { padding-block: 30px 60px; }
.service-what__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: var(--gutter);
  align-items: center;
}
@media (max-width: 1024px) { .service-what__grid { grid-template-columns: 1fr; } }

.service-experts {
  padding-block: 60px;
  background: var(--c-surface-alt) url("../img/bg-maps.png") center top no-repeat;
}
.service-experts .section-heading { text-align: center; }

/* Tabs (web-dev, seo) — Onum app-tab style: pill buttons + panel */
.tabs__nav { display: flex; gap: var(--s-3); margin-bottom: var(--s-5); flex-wrap: wrap; }
.tabs__btn {
  padding: 12px 24px;
  font-family: var(--f-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  background: var(--c-surface-alt);
  border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.tabs__btn[aria-selected="true"] { background: var(--c-accent); color: #fff; }
.tabs__panel[hidden] { display: none; }

/* FAQ accordion */
.faq { padding-block: 50px; }
.faq .section-heading { text-align: center; margin-bottom: var(--s-8); }
.faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: start; }
@media (max-width: 1024px) { .faq__grid { grid-template-columns: 1fr; } }
.acc { border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.acc + .acc { margin-top: var(--s-4); }
.acc__btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) var(--s-5);
  font-family: var(--f-display);
  font-size: var(--fs-body);
  font-weight: var(--fw-heading);
  text-align: left;
  color: var(--c-ink);
  background: var(--c-surface);
  border: 0;
  cursor: pointer;
}
.acc__btn[aria-expanded="true"] { color: var(--c-accent); }
.acc__btn::after {
  content: "";
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-base) var(--ease);
}
.acc__btn[aria-expanded="true"]::after { transform: rotate(-135deg); }
.acc__panel { padding: 0 var(--s-5) var(--s-5); }
.acc__panel[hidden] { display: none; }

/* Contact page */
.contact-wrap { padding-block: 50px; }
.contact-wrap__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--gutter); align-items: start; }
@media (max-width: 1024px) { .contact-wrap__grid { grid-template-columns: 1fr; } }
.contact-card {
  padding: 60px var(--s-7);
  color: #fff;
  background: #0039e4;               /* CONFIRMED — Elementor 109 inner section */
  border-radius: var(--r-md);
}
.contact-card .section-heading, .contact-card a { color: #fff; }
.contact-card__item { display: flex; gap: var(--s-4); margin-top: var(--s-5); }
.contact-card__item i { font-size: 30px; line-height: 1; }
.contact-card__item h6 { margin: 0 0 4px; color: #fff; font-size: var(--fs-h6); }
.contact-card__item p { margin: 0; }

/* Get Quote */
.quote-wrap { padding-block: 30px 60px; }
.quote-wrap__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--gutter); align-items: start; }
.quote-wrap h1 { text-align: center; padding-block: 30px; font-size: var(--fs-h1); }
@media (max-width: 1024px) { .quote-wrap__grid { grid-template-columns: 1fr; } .quote-wrap__media { order: -1; } }

/* 404 + thank-you */
.oops { padding-block: var(--s-10); text-align: center; }
.oops img { max-width: 420px; margin: 0 auto var(--s-6); }
.oops h1 { font-size: var(--fs-h1); }
.thanks { padding-block: 90px; text-align: center; }

/* Blog post page */
.post-hero {
  background: var(--c-ink) url("../img/pexels-pixabay-327540.jpg") center / cover no-repeat;
  padding-block: 110px;
  position: relative;
  isolation: isolate;
  text-align: center;
}
.post-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #000; opacity: .65; }
.post-hero__title { color: #fff; font-size: var(--fs-h1); margin: 0 auto; max-width: 900px; }
.post-hero__meta { margin-top: var(--s-4); color: var(--c-line); font-size: var(--fs-small); }
.post-body { padding-block: var(--section-y); }
.post-body .container { max-width: 860px; }
.post-body h2, .post-body h3 { margin-top: var(--s-7); }
.post-body ul, .post-body ol { padding-left: 1.4em; margin: 0 0 var(--s-4); }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body img { border-radius: var(--r-md); margin-block: var(--s-4); }
.authorbox {
  display: flex;
  gap: var(--s-5);
  margin-top: var(--s-8);
  padding: var(--s-6);
  background: var(--c-surface-alt);
  border-radius: var(--r-md);
}
.authorbox img { width: 72px; height: 72px; border-radius: 50%; flex: 0 0 72px; }
.authorbox h6 { margin-bottom: var(--s-2); }
.authorbox p { margin: 0; font-size: var(--fs-small); }