/* ==========================================================
   KUARAFINE GLOBAL CSS PLUGIN
   Generated 2026-10-02
   Loads after Astra/Elementor to stabilize styling for logged-out, mobile, and new-device visitors.
========================================================== */

/* ==========================================================
   KUARAFINE GLOBAL / ASTRA MASTER HEADER
========================================================== */
.ast-primary-header-bar {
  background: #ffffff;
  border-bottom: 1px solid rgba(8,43,80,.08);
  box-shadow: 0 4px 18px rgba(8,43,80,.05);
}
.main-header-menu > .menu-item > .menu-link {
  font-family: Poppins, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .1px;
  color: #082b50;
  padding-left: 13px;
  padding-right: 13px;
  transition: color .2s ease;
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .current-menu-item > .menu-link,
.main-header-menu > .current-menu-ancestor > .menu-link {
  color: #ff6a00;
}
.main-header-menu .sub-menu {
  background: #ffffff;
  border: 1px solid #e3ebf3;
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 14px 35px rgba(8,43,80,.12);
}
.main-header-menu .sub-menu .menu-link {
  font-family: Poppins, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #082b50;
  padding: 11px 16px;
  border-radius: 7px;
}
.main-header-menu .sub-menu .menu-link:hover {
  background: #f2f7fc;
  color: #ff6a00;
}
.ast-header-button-1 .ast-custom-button {
  font-family: Poppins, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #ff6a00;
  border: 0;
  border-radius: 9px;
  padding: 13px 20px;
  box-shadow: 0 8px 22px rgba(255,106,0,.20);
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ast-header-button-1 .ast-custom-button:hover {
  color: #fff;
  background: #e85f00;
  transform: translateY(-1px);
  box-shadow: 0 11px 26px rgba(255,106,0,.26);
}
.ast-builder-menu-mobile .main-navigation .menu-item > .menu-link {
  font-family: Poppins, "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #082b50;
}
.ast-builder-menu-mobile .main-navigation .menu-item > .menu-link:hover,
.ast-builder-menu-mobile .main-navigation .current-menu-item > .menu-link {
  color: #ff6a00;
}
.ast-builder-menu-mobile .sub-menu .menu-link {
  font-size: 14px;
  font-weight: 500;
}
@media (min-width: 922px) {
  .ast-primary-header-bar .site-primary-header-wrap { min-height: 80px; }
  .site-header-primary-section-left,
  .site-header-primary-section-right { align-items: center; }
}


/* ================= HOME ================= */
/* KUARAFINE | ELEMENTOR CSS WIDGET | V7 */
/* Paste into the FIRST Elementor HTML widget. */

#kf-site {
  --navy: #102b4c;
  --navy-dark: #0a203b;
  --blue: #0865b1;
  --orange: #f36a21;
  --orange-dark: #d94d0e;
  --white: #ffffff;
  --cream: #fff9f4;
  --light: #f5f8fc;
  --text: #26364b;
  --muted: #64748b;
  --border: #e5eaf0;
  --container: 1280px;
  --header-height: 78px;
  --shadow: 0 8px 30px rgba(16, 43, 76, 0.10);

  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--white);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

#kf-site *,
#kf-site *::before,
#kf-site *::after {
  box-sizing: border-box;
}

#kf-site img {
  max-width: 100%;
  height: auto;
}

#kf-site a {
  text-decoration: none;
  transition: all 0.25s ease;
}

#kf-site h1,
#kf-site h2,
#kf-site h3 {
  margin: 0;
  font-family: Poppins, "Segoe UI", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

#kf-site p {
  margin: 0 0 18px;
  line-height: 1.65;
}

#kf-site ul {
  margin: 0;
  padding: 0;
}

#kf-site a:focus-visible,
#kf-site summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

/* LAYOUT */
#kf-site .wrap {
  width: calc(100% - 60px);
  max-width: var(--container);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

#kf-site .section {
  position: relative;
  width: 100%;
  padding: 65px 0;
  scroll-margin-top: 90px;
}

#kf-site .section h2 {
  color: var(--navy);
  font-size: clamp(27px, 2.8vw, 38px);
  letter-spacing: -0.7px;
  margin-bottom: 14px;
}

#kf-site .eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#kf-site .eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 3px;
  margin-right: 10px;
  background: var(--orange);
  vertical-align: middle;
}

/* HEADER */
#kf-site .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: var(--header-height);
  z-index: 999999;
  background: rgba(255,255,255,0.98);
  border-bottom: 1px solid rgba(16,43,76,0.07);
  box-shadow: 0 3px 18px rgba(16,43,76,0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

#kf-site .header-inner {
  width: calc(100% - 60px);
  max-width: 1320px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
}

#kf-site .header-spacer {
  height: var(--header-height);
}

/* MAIN LOGO */
#kf-site .logo-link {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 190px;
}

#kf-site .logo-image {
  display: block;
  width: 100%;
  max-height: 58px;
  object-fit: contain;
}

/* DESKTOP NAV */
#kf-site .nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
}

#kf-site .nav a {
  display: inline-flex;
  align-items: center;
  padding: 12px 13px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

#kf-site .nav a:hover {
  color: var(--orange-dark);
}

#kf-site .nav .nav-cta {
  margin-left: 12px;
  padding: 13px 21px;
  background: var(--orange-dark);
  color: #fff;
  border-radius: 7px;
  font-weight: 700;
}

#kf-site .nav .nav-cta:hover {
  background: #b83f0a;
  color: #fff;
  transform: translateY(-2px);
}

/* MOBILE MENU — NO JAVASCRIPT */
#kf-site .mobile-menu {
  display: none;
  position: relative;
  margin-left: auto;
}

#kf-site .mobile-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  background: var(--light);
  color: var(--navy);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  font-size: 23px;
  line-height: 1;
}

#kf-site .mobile-menu summary::-webkit-details-marker {
  display: none;
}

#kf-site .mobile-nav {
  position: absolute;
  top: calc(100% + 13px);
  right: 0;
  width: min(340px, calc(100vw - 30px));
  padding: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

#kf-site .mobile-nav a {
  display: block;
  padding: 13px 15px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
}

#kf-site .mobile-nav a:hover {
  background: var(--light);
  color: var(--orange-dark);
}

#kf-site .mobile-nav .mobile-cta {
  margin-top: 10px;
  background: var(--orange-dark);
  color: #fff;
  text-align: center;
}

/* BUTTONS */
#kf-site .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 25px;
  background: var(--orange-dark);
  color: #fff;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

#kf-site .btn:hover {
  background: #b83f0a;
  color: #fff;
  transform: translateY(-2px);
}

#kf-site .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 25px;
  background: #fff;
  color: var(--navy);
  border: 1.5px solid var(--orange);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
}

#kf-site .btn-secondary:hover {
  background: var(--cream);
}

/* IMAGE SECTIONS */
#kf-site .image-section {
  overflow: hidden;
  isolation: isolate;
}

#kf-site .scene-img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#kf-site .scene-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* HERO */
#kf-site .hero {
  min-height: 520px;
  display: flex;
  align-items: center;
  padding: 65px 0;
  background: var(--cream);
}

#kf-site .hero .scene-shade {
  background: linear-gradient(
    90deg,
    rgba(255,249,244,0.97) 0%,
    rgba(255,249,244,0.83) 28%,
    rgba(255,249,244,0.18) 52%,
    transparent 75%
  );
}

#kf-site .hero-content {
  max-width: 610px;
}

#kf-site .hero h1 {
  margin-bottom: 14px;
  color: var(--navy);
  font-size: clamp(42px,4.5vw,64px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -2px;
}

#kf-site .hero h1 span {
  color: var(--orange);
}

#kf-site .hero-sub {
  margin-bottom: 12px;
  color: var(--navy);
  font-size: 19px;
  font-weight: 700;
}

#kf-site .hero-content > p {
  max-width: 550px;
  font-size: 15px;
}

#kf-site .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 22px;
}

#kf-site .trust {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 28px;
}

#kf-site .trust > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 600;
}

#kf-site .trust span {
  color: var(--blue);
}

#kf-site .hero-note {
  position: absolute;
  top: 45px;
  right: 9%;
  z-index: 3;
  color: var(--navy);
  font-size: 23px;
  font-style: italic;
  line-height: 1.25;
  transform: rotate(-5deg);
}

#kf-site .hero-note::after {
  content: "";
  display: block;
  width: 75px;
  height: 3px;
  margin-top: 8px;
  background: var(--orange);
}

#kf-site .hero-quote {
  position: absolute;
  right: 5%;
  bottom: 28px;
  z-index: 3;
  width: 215px;
  padding: 20px;
  background: rgba(255,255,255,0.94);
  border-radius: 13px;
  box-shadow: var(--shadow);
  color: var(--navy);
  font-size: 12px;
  line-height: 1.5;
}

#kf-site .hero-quote b {
  color: var(--orange);
  font-size: 34px;
  line-height: 1;
}

/* SOLUTIONS */
#kf-site .section-head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  align-items: end;
  gap: 45px;
  margin-bottom: 32px;
}

#kf-site .section-head p {
  margin: 0;
  font-size: 14px;
}

#kf-site .services {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 14px;
}

#kf-site .service {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 27px 15px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  text-align: center;
  transition: all 0.3s ease;
}

#kf-site .service:hover {
  transform: translateY(-5px);
  border-color: var(--blue);
  box-shadow: var(--shadow);
}

#kf-site .service-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 14px;
  color: var(--blue);
  font-size: 31px;
}

#kf-site .service h3 {
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.35;
}

#kf-site .service p {
  margin-bottom: 17px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

#kf-site .service a {
  margin-top: auto;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
}

#kf-site .service a:hover {
  color: var(--orange-dark);
}

/* SUB-BRAND LOGOS — HIGH CONTRAST */
#kf-site .subbrand-logo-card {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
  padding: 10px 15px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(16,43,76,0.08);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(10,32,59,0.10);
}

#kf-site .subbrand-logo {
  display: block;
  width: auto;
  object-fit: contain;
  object-position: left center;
}

#kf-site .health-logo {
  max-width: 245px;
  max-height: 78px;
}

#kf-site .tech-logo {
  max-width: 265px;
  max-height: 82px;
}

/* HEALTH + TECH BANDS */
#kf-site .band {
  min-height: 430px;
  display: flex;
  align-items: center;
}

#kf-site .health-band .scene-shade {
  background: linear-gradient(
    90deg,
    rgba(247,251,255,0.98) 0%,
    rgba(247,251,255,0.90) 29%,
    rgba(247,251,255,0.10) 52%,
    rgba(247,251,255,0.18) 67%,
    rgba(247,251,255,0.74) 100%
  );
}

#kf-site .band-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr;
  align-items: center;
  gap: 35px;
}

#kf-site .band-copy {
  max-width: 440px;
}

#kf-site .band-copy p {
  font-size: 14px;
}

#kf-site .band-list {
  max-width: 340px;
  margin-left: auto;
  padding: 22px 22px 18px;
  border-radius: 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#kf-site .health-list-card {
  background: rgba(255,255,255,0.87);
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: 0 12px 32px rgba(16,43,76,0.15);
}

#kf-site .list {
  list-style: none;
}

#kf-site .list li {
  position: relative;
  margin-bottom: 15px;
  padding-left: 31px;
  font-size: 14px;
  line-height: 1.45;
}

#kf-site .list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

#kf-site .script-note {
  margin-top: 24px;
  color: var(--navy);
  font-size: 23px;
  font-style: italic;
  line-height: 1.3;
}

#kf-site .tech-band {
  color: #fff;
}

#kf-site .tech-band .scene-shade {
  background: linear-gradient(
    90deg,
    rgba(10,32,59,0.98) 0%,
    rgba(10,32,59,0.93) 30%,
    rgba(10,32,59,0.14) 56%,
    rgba(10,32,59,0.78) 100%
  );
}

#kf-site .tech-band h2,
#kf-site .tech-band p {
  color: #fff;
}

#kf-site .tech-list-card {
  background: rgba(7,30,56,0.78);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
}

#kf-site .tech-band .list li {
  color: #fff;
}

#kf-site .tech-band .list li::before {
  background: var(--orange);
}

#kf-site .tech-band .script-note {
  color: #fff;
}

/* DIGITAL */
#kf-site .digital-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.7fr;
  align-items: center;
  gap: 35px;
}

#kf-site .device-img {
  display: block;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  object-fit: contain;
}

/* WHY */
#kf-site .why {
  background: linear-gradient(110deg,#fff9f4 0%,#fff 50%,#f3f8fd 100%);
}

#kf-site .why-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 55px;
}

#kf-site .benefits {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 15px;
}

#kf-site .benefits > div {
  text-align: center;
}

#kf-site .benefit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  margin-bottom: 10px;
  color: var(--orange);
  font-size: 32px;
}

#kf-site .benefits h3 {
  color: var(--navy);
  font-size: 13px;
}

/* PROCESS */
#kf-site .process-layout {
  display: grid;
  grid-template-columns: 1.2fr repeat(3,1fr);
  align-items: center;
  gap: 30px;
}

#kf-site .step {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

#kf-site .step > b {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

#kf-site .step h3 {
  margin-bottom: 5px;
  color: var(--navy);
  font-size: 17px;
}

#kf-site .step p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

/* CONTACT */
#kf-site .contact {
  min-height: 490px;
  display: flex;
  align-items: center;
  color: #fff;
}

#kf-site .contact .scene-shade {
  background: linear-gradient(90deg,rgba(10,32,59,0.75),rgba(10,32,59,0.25));
}

#kf-site .contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 65px;
}

#kf-site .contact h2,
#kf-site .contact p {
  color: #fff;
}

#kf-site .contact-note {
  margin-top: 35px;
  font-size: 27px;
  font-style: italic;
  line-height: 1.3;
}

#kf-site .form-shell {
  padding: 22px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}

#kf-site .form-shell iframe {
  display: block;
  width: 100%;
  min-height: 850px;
  border: 0;
  background: #fff;
}

#kf-site .form-fallback-link {
  display: block;
  margin-top: 10px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* FOOTER */
#kf-site .footer {
  width: 100%;
  padding: 30px 0 22px;
  background: var(--navy-dark);
  color: #fff;
}

#kf-site .footer-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 30px;
}

#kf-site .footer-brand {
  min-width: 180px;
}

#kf-site .footer-brand-name {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.1;
}

#kf-site .footer-brand small {
  display: block;
  margin-top: 5px;
  color: rgba(255,255,255,0.70);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3px;
}

#kf-site .footer-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

#kf-site .footer-nav a {
  color: rgba(255,255,255,0.90);
  font-size: 12px;
  font-weight: 600;
}

#kf-site .footer-nav a:hover {
  color: var(--orange);
}

#kf-site .footer-social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

#kf-site .footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
}

#kf-site .footer-social a:hover {
  background: var(--orange);
  color: #fff;
  transform: translateY(-2px);
}

#kf-site .legal {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
  width: 100%;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.60);
  font-size: 10px;
}

#kf-site .legal span {
  margin: 0 6px;
}

#kf-site .footer-policy {
  display: flex;
  align-items: center;
}

#kf-site .footer-policy a {
  color: rgba(255,255,255,0.70);
}

#kf-site .footer-policy a:hover {
  color: var(--orange);
}

/* RESPONSIVE */
@media (max-width: 1199px) {
  #kf-site .services { grid-template-columns: repeat(3,1fr); }
  #kf-site .band-layout { grid-template-columns: 1fr 0.8fr; }
  #kf-site .band-spacer { display: none; }
  #kf-site .digital-layout { grid-template-columns: 1fr 1fr; }
  #kf-site .digital-list { grid-column: 1 / -1; }
  #kf-site .benefits { grid-template-columns: repeat(2,1fr); }
  #kf-site .process-layout { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 980px) {
  #kf-site { --header-height: 70px; }
  #kf-site .header-inner { width: calc(100% - 36px); }
  #kf-site .logo-link { width: 170px; }
  #kf-site .nav { display: none; }
  #kf-site .mobile-menu { display: block; }
}

@media (max-width: 900px) {
  #kf-site .footer-row { grid-template-columns: 1fr auto; }
  #kf-site .footer-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  #kf-site .wrap { width: calc(100% - 36px); }

  #kf-site .section {
    padding: 55px 0;
    scroll-margin-top: 80px;
  }

  #kf-site .section h2 { font-size: 28px; }

  #kf-site .hero { min-height: 570px; }
  #kf-site .hero .scene-img { object-position: 65% center; }

  #kf-site .hero .scene-shade {
    background: linear-gradient(
      90deg,
      rgba(255,249,244,0.97),
      rgba(255,249,244,0.86)
    );
  }

  #kf-site .hero h1 {
    font-size: 42px;
    letter-spacing: -1px;
  }

  #kf-site .buttons {
    flex-direction: column;
    align-items: stretch;
  }

  #kf-site .trust { gap: 12px; }

  #kf-site .hero-note,
  #kf-site .hero-quote { display: none; }

  #kf-site .section-head,
  #kf-site .band-layout,
  #kf-site .digital-layout,
  #kf-site .why-layout,
  #kf-site .process-layout,
  #kf-site .contact-layout,
  #kf-site .footer-row {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  #kf-site .services { grid-template-columns: repeat(2,1fr); }

  #kf-site .health-band .scene-shade {
    background: rgba(247,251,255,0.90);
  }

  #kf-site .tech-band .scene-shade {
    background: rgba(10,32,59,0.90);
  }

  #kf-site .band-list {
    margin-left: 0;
    max-width: 100%;
  }

  #kf-site .contact-note { font-size: 23px; }

  #kf-site .form-shell { padding: 12px; }

  #kf-site .form-shell iframe { min-height: 1050px; }

  #kf-site .subbrand-logo-card {
    padding: 9px 13px;
  }

  #kf-site .health-logo,
  #kf-site .tech-logo {
    max-width: 210px;
  }
}

@media (max-width: 600px) {
  #kf-site .footer { padding: 28px 0 22px; }
  #kf-site .footer-row { text-align: center; }
  #kf-site .footer-nav,
  #kf-site .footer-social { justify-content: center; }

  #kf-site .legal {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  #kf-site .footer-policy { justify-content: center; }
}

@media (max-width: 480px) {
  #kf-site .hero h1 { font-size: 36px; }
  #kf-site .services { grid-template-columns: 1fr; }
  #kf-site .benefits { grid-template-columns: 1fr 1fr; }
}

/* WordPress admin bar */
body.admin-bar #kf-site .header { top: 32px; }

@media (max-width: 782px) {
  body.admin-bar #kf-site .header { top: 46px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #kf-site *,
  #kf-site *::before,
  #kf-site *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ================= ABOUT ================= */
/* ==========================================================
   KUARAFINE — ABOUT US
   EXACT ELEMENTOR STAGE 5 CSS MIGRATION
   Source: user-provided About page container CSS
   Scoped for safe site-wide loading.
   Supports: .kf-about-page and #kf-about-kuarafine
========================================================== */

/* =========================================================
   KUARAFINE — ABOUT US PAGE
   STAGE 5 CSS
   Page Title: About Kuarafine | Technology & Digital Solutions Brockton MA
========================================================= */

/* ---------- BRAND VARIABLES ---------- */

.kf-about-page,
#kf-about-kuarafine{--kf-blue:#0A2F6B;
  --kf-blue-dark:#082652;
  --kf-blue-soft:#123E86;
  --kf-orange:#F58220;
  --kf-orange-dark:#E46F08;
  --kf-white:#ffffff;
  --kf-offwhite:#F7F9FC;
  --kf-light:#EEF4FB;
  --kf-text:#21324B;
  --kf-muted:#66758F;
  --kf-border:#DCE6F2;
  --kf-shadow:0 12px 32px rgba(10,47,107,0.10);
  --kf-radius:18px;
  --kf-radius-sm:12px;
  --kf-container:1240px;
  --kf-transition:all .3s ease;
  --kf-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}

/* ---------- PAGE BASE ---------- */

.kf-about-page,
#kf-about-kuarafine{font-family:var(--kf-font);
  color:var(--kf-text);
  line-height:1.6;
  background:#fff;}

.kf-about-page *,
#kf-about-kuarafine *{box-sizing:border-box;}

.kf-about-page img,
#kf-about-kuarafine img{max-width:100%;
  height:auto;
  display:block;}

.kf-about-page .kf-wrap,
#kf-about-kuarafine .kf-wrap{width:min(100%, var(--kf-container));
  margin:0 auto;
  padding-left:24px;
  padding-right:24px;}

.kf-about-page .kf-section,
#kf-about-kuarafine .kf-section{position:relative;
  padding:80px 0;}

.kf-about-page .kf-section-tight,
#kf-about-kuarafine .kf-section-tight{padding:60px 0;}

.kf-about-page .kf-section-light,
#kf-about-kuarafine .kf-section-light{background:var(--kf-offwhite);}

.kf-about-page .kf-section-white,
#kf-about-kuarafine .kf-section-white{background:#fff;}

.kf-about-page .kf-eyebrow,
#kf-about-kuarafine .kf-eyebrow{display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
  color:var(--kf-orange);
  font-size:14px;
  font-weight:800;
  letter-spacing:1.8px;
  text-transform:uppercase;}

.kf-about-page .kf-eyebrow::before,
#kf-about-kuarafine .kf-eyebrow::before{content:"";
  width:28px;
  height:3px;
  background:var(--kf-orange);
  border-radius:10px;}

.kf-about-page .kf-title,
#kf-about-kuarafine .kf-title{margin:0 0 18px;
  color:var(--kf-blue);
  font-size:clamp(34px,4.6vw,64px);
  line-height:1.05;
  font-weight:800;
  letter-spacing:-1.5px;}

.kf-about-page .kf-title .accent,
#kf-about-kuarafine .kf-title .accent{color:var(--kf-orange);}

.kf-about-page .kf-subtitle,
#kf-about-kuarafine .kf-subtitle{margin:0;
  color:var(--kf-muted);
  font-size:20px;
  line-height:1.7;}

.kf-about-page .kf-copy,
#kf-about-kuarafine .kf-copy{color:var(--kf-muted);
  font-size:18px;
  line-height:1.8;}

.kf-about-page .kf-center,
#kf-about-kuarafine .kf-center{text-align:center;}

.kf-about-page .kf-center .kf-eyebrow,
#kf-about-kuarafine .kf-center .kf-eyebrow{justify-content:center;}

.kf-about-page .kf-btn-row,
#kf-about-kuarafine .kf-btn-row{display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:30px;}

.kf-about-page .kf-btn,
#kf-about-kuarafine .kf-btn{display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:14px 28px;
  border-radius:999px;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  transition:var(--kf-transition);}

.kf-about-page .kf-btn-primary,
#kf-about-kuarafine .kf-btn-primary{color:#fff;
  background:var(--kf-orange);
  box-shadow:0 10px 24px rgba(245,130,32,0.24);}

.kf-about-page .kf-btn-primary:hover,
#kf-about-kuarafine .kf-btn-primary:hover{background:var(--kf-orange-dark);
  color:#fff;
  transform:translateY(-2px);}

.kf-about-page .kf-btn-outline,
#kf-about-kuarafine .kf-btn-outline{color:#fff;
  border:2px solid rgba(255,255,255,.7);
  background:transparent;}

.kf-about-page .kf-btn-outline:hover,
#kf-about-kuarafine .kf-btn-outline:hover{background:#fff;
  color:var(--kf-blue);
  border-color:#fff;}

.kf-about-page .kf-btn-outline-blue,
#kf-about-kuarafine .kf-btn-outline-blue{color:var(--kf-blue);
  border:2px solid var(--kf-blue);
  background:transparent;}

.kf-about-page .kf-btn-outline-blue:hover,
#kf-about-kuarafine .kf-btn-outline-blue:hover{background:var(--kf-blue);
  color:#fff;}

.kf-about-page .kf-mini-points,
#kf-about-kuarafine .kf-mini-points{display:flex;
  flex-wrap:wrap;
  gap:18px 26px;
  margin-top:28px;}

.kf-about-page .kf-mini-points span,
#kf-about-kuarafine .kf-mini-points span{display:inline-flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-size:16px;
  font-weight:600;}

.kf-about-page .kf-mini-points span::before,
#kf-about-kuarafine .kf-mini-points span::before{content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--kf-orange);
  flex:0 0 9px;}

.kf-about-page .kf-card,
#kf-about-kuarafine .kf-card{background:#fff;
  border:1px solid var(--kf-border);
  border-radius:var(--kf-radius);
  box-shadow:var(--kf-shadow);}

/* ---------- HERO ---------- */

.kf-about-page .kf-about-hero,
#kf-about-kuarafine .kf-about-hero{position:relative;
  overflow:hidden;
  color:#fff;
  padding:0;
  background:
    linear-gradient(90deg, rgba(7,35,82,.92) 0%, rgba(7,35,82,.88) 34%, rgba(7,35,82,.40) 62%, rgba(7,35,82,.10) 100%),
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/1-2.png") center center / cover no-repeat;}

.kf-about-page .kf-about-hero .kf-wrap,
#kf-about-kuarafine .kf-about-hero .kf-wrap{min-height:720px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:30px;
  padding-top:70px;
  padding-bottom:70px;}

.kf-about-page .kf-about-hero .kf-title,
#kf-about-kuarafine .kf-about-hero .kf-title{color:#fff;
  max-width:680px;}

.kf-about-page .kf-about-hero .kf-copy,
#kf-about-kuarafine .kf-about-hero .kf-copy{color:rgba(255,255,255,.90);
  max-width:620px;
  font-size:22px;}

.kf-about-page .kf-hero-right,
#kf-about-kuarafine .kf-hero-right{min-height:420px;}

.kf-about-page .kf-hero-logos,
#kf-about-kuarafine .kf-hero-logos{margin-top:30px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;}

.kf-about-page .kf-hero-logos .kf-card,
#kf-about-kuarafine .kf-hero-logos .kf-card{padding:18px 14px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:none;
  backdrop-filter:blur(6px);
  text-align:center;
  color:#fff;}

.kf-about-page .kf-hero-logos .kf-card strong,
#kf-about-kuarafine .kf-hero-logos .kf-card strong{display:block;
  margin-top:8px;
  font-size:15px;
  line-height:1.35;}

/* ---------- WHO WE ARE ---------- */

.kf-about-page .kf-who-grid,
#kf-about-kuarafine .kf-who-grid{display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:38px;
  align-items:center;}

.kf-about-page .kf-who-image,
#kf-about-kuarafine .kf-who-image{border-radius:var(--kf-radius);
  min-height:470px;
  background:
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/2-2.png") center center / cover no-repeat;
  box-shadow:var(--kf-shadow);}

.kf-about-page .kf-who-copy .kf-title,
#kf-about-kuarafine .kf-who-copy .kf-title{font-size:clamp(32px,4vw,54px);}

.kf-about-page .kf-capability-grid,
#kf-about-kuarafine .kf-capability-grid{display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:28px;}

.kf-about-page .kf-capability,
#kf-about-kuarafine .kf-capability{background:#fff;
  border:1px solid var(--kf-border);
  border-radius:14px;
  padding:18px 14px;
  text-align:center;
  box-shadow:0 8px 18px rgba(10,47,107,.06);}

.kf-about-page .kf-capability strong,
#kf-about-kuarafine .kf-capability strong{display:block;
  color:var(--kf-blue);
  font-size:15px;
  line-height:1.4;}

/* ---------- WHY WE EXIST ---------- */

.kf-about-page .kf-why-grid,
#kf-about-kuarafine .kf-why-grid{display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  overflow:hidden;
  border-radius:var(--kf-radius);
  background:#fff;
  box-shadow:var(--kf-shadow);}

.kf-about-page .kf-why-copy,
#kf-about-kuarafine .kf-why-copy{padding:56px 52px;}

.kf-about-page .kf-why-image,
#kf-about-kuarafine .kf-why-image{min-height:480px;
  background:
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/3-2.png") center center / cover no-repeat;}

.kf-about-page .kf-checklist,
#kf-about-kuarafine .kf-checklist{margin:26px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;}

.kf-about-page .kf-checklist li,
#kf-about-kuarafine .kf-checklist li{display:flex;
  align-items:flex-start;
  gap:12px;
  color:var(--kf-text);
  font-size:17px;
  font-weight:600;}

.kf-about-page .kf-checklist li::before,
#kf-about-kuarafine .kf-checklist li::before{content:"✓";
  width:24px;
  height:24px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(245,130,32,.14);
  color:var(--kf-orange);
  font-size:14px;
  font-weight:800;
  flex:0 0 24px;
  margin-top:2px;}

/* ---------- ECOSYSTEM ---------- */

.kf-about-page .kf-ecosystem,
#kf-about-kuarafine .kf-ecosystem{background:linear-gradient(180deg,#fff 0%, #f9fbfe 100%);}

.kf-about-page .kf-brand-grid,
#kf-about-kuarafine .kf-brand-grid{display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  margin-top:36px;}

.kf-about-page .kf-brand-card,
#kf-about-kuarafine .kf-brand-card{background:#fff;
  border:1px solid var(--kf-border);
  border-radius:var(--kf-radius);
  padding:28px 24px;
  box-shadow:var(--kf-shadow);
  transition:var(--kf-transition);}

.kf-about-page .kf-brand-card:hover,
#kf-about-kuarafine .kf-brand-card:hover{transform:translateY(-5px);}

.kf-about-page .kf-brand-logo,
#kf-about-kuarafine .kf-brand-logo{height:80px;
  display:flex;
  align-items:center;
  margin-bottom:18px;}

.kf-about-page .kf-brand-logo img,
#kf-about-kuarafine .kf-brand-logo img{max-height:72px;
  width:auto;}

.kf-about-page .kf-brand-card h3,
#kf-about-kuarafine .kf-brand-card h3{margin:0 0 10px;
  color:var(--kf-blue);
  font-size:26px;
  line-height:1.15;}

.kf-about-page .kf-brand-card p,
#kf-about-kuarafine .kf-brand-card p{margin:0 0 16px;
  color:var(--kf-muted);
  font-size:17px;
  line-height:1.75;}

.kf-about-page .kf-brand-link,
#kf-about-kuarafine .kf-brand-link{color:var(--kf-orange);
  font-weight:700;
  text-decoration:none;}

.kf-about-page .kf-brand-link:hover,
#kf-about-kuarafine .kf-brand-link:hover{text-decoration:underline;}

/* ---------- PROCESS ---------- */

.kf-about-page .kf-process-row,
#kf-about-kuarafine .kf-process-row{display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:22px;
  margin-top:36px;}

.kf-about-page .kf-step,
#kf-about-kuarafine .kf-step{text-align:center;
  padding:26px 20px;
  background:#fff;
  border:1px solid var(--kf-border);
  border-radius:18px;
  box-shadow:0 8px 18px rgba(10,47,107,.05);
  position:relative;}

.kf-about-page .kf-step-number,
#kf-about-kuarafine .kf-step-number{width:54px;
  height:54px;
  margin:0 auto 18px;
  border-radius:50%;
  background:var(--kf-orange);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:800;}

.kf-about-page .kf-step h4,
#kf-about-kuarafine .kf-step h4{margin:0 0 10px;
  color:var(--kf-blue);
  font-size:24px;
  line-height:1.15;}

.kf-about-page .kf-step p,
#kf-about-kuarafine .kf-step p{margin:0;
  color:var(--kf-muted);
  font-size:16px;
  line-height:1.75;}

/* ---------- DIFFERENCE ---------- */

.kf-about-page .kf-difference,
#kf-about-kuarafine .kf-difference{background:linear-gradient(135deg, #082652 0%, #0a2f6b 55%, #103d84 100%);
  color:#fff;}

.kf-about-page .kf-difference .kf-title,
#kf-about-kuarafine .kf-difference .kf-title{color:#fff;}

.kf-about-page .kf-difference .kf-copy,
#kf-about-kuarafine .kf-difference .kf-copy{color:rgba(255,255,255,.88);}

.kf-about-page .kf-difference-grid,
#kf-about-kuarafine .kf-difference-grid{display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:start;}

.kf-about-page .kf-pill-grid,
#kf-about-kuarafine .kf-pill-grid{display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:26px;}

.kf-about-page .kf-pill,
#kf-about-kuarafine .kf-pill{background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:20px 18px;}

.kf-about-page .kf-pill strong,
#kf-about-kuarafine .kf-pill strong{display:block;
  margin-bottom:6px;
  color:#fff;
  font-size:18px;}

.kf-about-page .kf-pill span,
#kf-about-kuarafine .kf-pill span{color:rgba(255,255,255,.82);
  font-size:15px;
  line-height:1.65;}

/* ---------- ROOTED IN BROCKTON ---------- */

.kf-about-page .kf-rooted-grid,
#kf-about-kuarafine .kf-rooted-grid{display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  overflow:hidden;
  border-radius:var(--kf-radius);
  background:#fff;
  box-shadow:var(--kf-shadow);}

.kf-about-page .kf-rooted-image,
#kf-about-kuarafine .kf-rooted-image{min-height:400px;
  background:
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/5-1.png") center center / cover no-repeat;}

.kf-about-page .kf-rooted-copy,
#kf-about-kuarafine .kf-rooted-copy{padding:52px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;}

.kf-about-page .kf-rooted-copy .kf-title,
#kf-about-kuarafine .kf-rooted-copy .kf-title{font-size:clamp(30px,3.6vw,48px);}

/* ---------- FINAL CTA ---------- */

.kf-about-page .kf-final-cta,
#kf-about-kuarafine .kf-final-cta{position:relative;
  overflow:hidden;
  color:#fff;
  padding:0;
  background:
    linear-gradient(90deg, rgba(7,35,82,.90) 0%, rgba(7,35,82,.82) 40%, rgba(7,35,82,.48) 100%),
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/4-2.png") center center / cover no-repeat;}

.kf-about-page .kf-final-cta .kf-wrap,
#kf-about-kuarafine .kf-final-cta .kf-wrap{min-height:420px;
  display:grid;
  align-items:center;
  padding-top:60px;
  padding-bottom:60px;}

.kf-about-page .kf-final-cta .kf-title,
#kf-about-kuarafine .kf-final-cta .kf-title{color:#fff;
  max-width:760px;}

.kf-about-page .kf-final-cta .kf-copy,
#kf-about-kuarafine .kf-final-cta .kf-copy{color:rgba(255,255,255,.92);
  max-width:760px;}

/* ---------- FOOTER SPACE HELPER ---------- */

.kf-about-page .kf-last-section,
#kf-about-kuarafine .kf-last-section{margin-bottom:0;}

/* ---------- RESPONSIVE ---------- */

@media (max-width:1180px){

  .kf-about-page .kf-about-hero .kf-wrap,
#kf-about-kuarafine .kf-about-hero .kf-wrap,
.kf-about-page .kf-who-grid,
#kf-about-kuarafine .kf-who-grid,
.kf-about-page .kf-difference-grid,
#kf-about-kuarafine .kf-difference-grid{grid-template-columns:1fr;}

  .kf-about-page .kf-rooted-grid,
#kf-about-kuarafine .kf-rooted-grid,
.kf-about-page .kf-why-grid,
#kf-about-kuarafine .kf-why-grid{grid-template-columns:1fr;}

  .kf-about-page .kf-process-row,
#kf-about-kuarafine .kf-process-row{grid-template-columns:repeat(2,minmax(0,1fr));}

  .kf-about-page .kf-brand-grid,
#kf-about-kuarafine .kf-brand-grid{grid-template-columns:1fr;}

  .kf-about-page .kf-capability-grid,
#kf-about-kuarafine .kf-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr));}

  .kf-about-page .kf-hero-right,
#kf-about-kuarafine .kf-hero-right{min-height:0;}

  .kf-about-page .kf-hero-logos,
#kf-about-kuarafine .kf-hero-logos{grid-template-columns:repeat(2,minmax(0,1fr));}

}

@media (max-width:767px){

  .kf-about-page .kf-section,
#kf-about-kuarafine .kf-section,
.kf-about-page .kf-section-tight,
#kf-about-kuarafine .kf-section-tight{padding:56px 0;}

  .kf-about-page .kf-wrap,
#kf-about-kuarafine .kf-wrap{padding-left:18px;
    padding-right:18px;}

  .kf-about-page .kf-about-hero .kf-wrap,
#kf-about-kuarafine .kf-about-hero .kf-wrap{min-height:auto;
    padding-top:54px;
    padding-bottom:54px;}

  .kf-about-page .kf-about-hero .kf-copy,
#kf-about-kuarafine .kf-about-hero .kf-copy,
.kf-about-page .kf-copy,
#kf-about-kuarafine .kf-copy,
.kf-about-page .kf-subtitle,
#kf-about-kuarafine .kf-subtitle{font-size:17px;}

  .kf-about-page .kf-title,
#kf-about-kuarafine .kf-title{font-size:clamp(30px,9vw,48px);
    letter-spacing:-1px;}

  .kf-about-page .kf-hero-logos,
#kf-about-kuarafine .kf-hero-logos{grid-template-columns:1fr;}

  .kf-about-page .kf-mini-points,
#kf-about-kuarafine .kf-mini-points{gap:12px 18px;}

  .kf-about-page .kf-mini-points span,
#kf-about-kuarafine .kf-mini-points span{font-size:15px;}

  .kf-about-page .kf-capability-grid,
#kf-about-kuarafine .kf-capability-grid,
.kf-about-page .kf-pill-grid,
#kf-about-kuarafine .kf-pill-grid,
.kf-about-page .kf-process-row,
#kf-about-kuarafine .kf-process-row{grid-template-columns:1fr;}

  .kf-about-page .kf-who-image,
#kf-about-kuarafine .kf-who-image,
.kf-about-page .kf-why-image,
#kf-about-kuarafine .kf-why-image,
.kf-about-page .kf-rooted-image,
#kf-about-kuarafine .kf-rooted-image{min-height:280px;}

  .kf-about-page .kf-why-copy,
#kf-about-kuarafine .kf-why-copy,
.kf-about-page .kf-rooted-copy,
#kf-about-kuarafine .kf-rooted-copy{padding:36px 24px;}

  .kf-about-page .kf-btn-row,
#kf-about-kuarafine .kf-btn-row{flex-direction:column;
    align-items:stretch;}

  .kf-about-page .kf-btn,
#kf-about-kuarafine .kf-btn{width:100%;}

}

/* ================= MANAGED IT ================= */
/* ==========================================================
   KUARAFINE — MANAGED IT SERVICES
   ELEMENTOR CUSTOM CSS — COMPLETE PAGE CSS
   AGENT KUARA PAGEBUILDER | STAGE 5
   Scope wrapper for matching HTML: #kf-managed-it
========================================================== */

#kf-managed-it {
  --kf-navy: #082b50;
  --kf-navy-2: #0d3b6a;
  --kf-navy-dark: #051d35;
  --kf-blue: #0f6fc6;
  --kf-blue-soft: #eaf4ff;
  --kf-orange: #ff6a00;
  --kf-orange-dark: #e65600;
  --kf-white: #ffffff;
  --kf-offwhite: #f7f9fc;
  --kf-text: #13233b;
  --kf-muted: #627086;
  --kf-border: #dce5ef;
  --kf-shadow: 0 14px 40px rgba(8, 43, 80, .10);
  --kf-radius: 16px;
  --kf-container: 1220px;

  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--kf-text);
  background: var(--kf-white);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

#kf-managed-it *,
#kf-managed-it *::before,
#kf-managed-it *::after {
  box-sizing: border-box;
}

#kf-managed-it img {
  display: block;
  max-width: 100%;
  height: auto;
}

#kf-managed-it a {
  text-decoration: none;
  transition: all .25s ease;
}

#kf-managed-it h1,
#kf-managed-it h2,
#kf-managed-it h3,
#kf-managed-it h4,
#kf-managed-it p {
  margin-top: 0;
}

#kf-managed-it h1,
#kf-managed-it h2,
#kf-managed-it h3,
#kf-managed-it h4 {
  font-family: Poppins, Inter, "Segoe UI", Arial, sans-serif;
  color: var(--kf-navy);
  line-height: 1.15;
}

#kf-managed-it .kf-wrap {
  width: calc(100% - 48px);
  max-width: var(--kf-container);
  margin: 0 auto;
}

#kf-managed-it .kf-section {
  position: relative;
  padding: 78px 0;
}

#kf-managed-it .kf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--kf-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

#kf-managed-it .kf-kicker::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 10px;
  background: currentColor;
}

#kf-managed-it .kf-section-title {
  max-width: 850px;
  margin: 0 auto 12px;
  text-align: center;
  font-size: clamp(31px, 3.5vw, 46px);
  letter-spacing: -.8px;
}

#kf-managed-it .kf-section-intro {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  color: var(--kf-muted);
  font-size: 16px;
}

/* ==========================================================
   PAGE HEADER / NAV
========================================================== */

#kf-managed-it .kf-header {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid rgba(8,43,80,.08);
  box-shadow: 0 4px 18px rgba(8,43,80,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#kf-managed-it .kf-header-inner {
  width: calc(100% - 48px);
  max-width: 1320px;
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

#kf-managed-it .kf-logo {
  flex: 0 0 208px;
  width: 208px;
}

#kf-managed-it .kf-logo img {
  max-height: 58px;
  object-fit: contain;
}

#kf-managed-it .kf-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
}

#kf-managed-it .kf-nav a {
  padding: 12px 13px;
  color: var(--kf-navy);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

#kf-managed-it .kf-nav a:hover {
  color: var(--kf-orange);
}

#kf-managed-it .kf-header-cta {
  margin-left: 12px;
  padding: 13px 20px !important;
  background: var(--kf-orange);
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(255,106,0,.22);
}

#kf-managed-it .kf-header-cta:hover {
  background: var(--kf-orange-dark);
  transform: translateY(-1px);
}

/* Native CSS mobile menu */
#kf-managed-it .kf-mobile-menu {
  display: none;
  margin-left: auto;
  position: relative;
}

#kf-managed-it .kf-mobile-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--kf-border);
  border-radius: 10px;
  background: var(--kf-offwhite);
  color: var(--kf-navy);
  cursor: pointer;
  list-style: none;
  font-size: 24px;
}

#kf-managed-it .kf-mobile-menu summary::-webkit-details-marker {
  display: none;
}

#kf-managed-it .kf-mobile-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(330px, calc(100vw - 32px));
  padding: 14px;
  background: #fff;
  border: 1px solid var(--kf-border);
  border-radius: 14px;
  box-shadow: var(--kf-shadow);
}

#kf-managed-it .kf-mobile-panel a {
  display: block;
  padding: 12px 14px;
  color: var(--kf-navy);
  font-size: 14px;
  font-weight: 650;
  border-radius: 8px;
}

#kf-managed-it .kf-mobile-panel a:hover {
  background: var(--kf-offwhite);
}

/* ==========================================================
   BUTTONS
========================================================== */

#kf-managed-it .kf-btn,
#kf-managed-it .kf-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

#kf-managed-it .kf-btn {
  background: var(--kf-orange);
  color: #fff;
  box-shadow: 0 10px 28px rgba(255,106,0,.25);
}

#kf-managed-it .kf-btn:hover {
  background: var(--kf-orange-dark);
  color: #fff;
  transform: translateY(-2px);
}

#kf-managed-it .kf-btn-outline {
  border: 1.5px solid rgba(255,255,255,.82);
  color: #fff;
  background: rgba(255,255,255,.04);
}

#kf-managed-it .kf-btn-outline:hover {
  background: #fff;
  color: var(--kf-navy);
}

/* ==========================================================
   HERO
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/10.png
========================================================== */

#kf-managed-it .kf-hero {
  position: relative;
  min-height: 610px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4,27,51,.98) 0%, rgba(4,27,51,.94) 36%, rgba(4,27,51,.54) 60%, rgba(4,27,51,.14) 100%),
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/10.png") center right / cover no-repeat;
}

#kf-managed-it .kf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 72%, rgba(2,17,32,.20) 100%);
}

#kf-managed-it .kf-hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 82px 0 70px;
}

#kf-managed-it .kf-hero .kf-kicker {
  color: var(--kf-orange);
}

#kf-managed-it .kf-hero h1 {
  margin-bottom: 20px;
  color: #fff;
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -1.8px;
}

#kf-managed-it .kf-hero h1 .kf-orange-text {
  color: var(--kf-orange);
}

#kf-managed-it .kf-hero-copy {
  max-width: 585px;
  margin-bottom: 28px;
  color: rgba(255,255,255,.94);
  font-size: 18px;
  line-height: 1.6;
}

#kf-managed-it .kf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}

#kf-managed-it .kf-hero-trust {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  max-width: 780px;
}

#kf-managed-it .kf-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

#kf-managed-it .kf-trust-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--kf-blue);
  font-size: 17px;
}

/* ==========================================================
   SERVICES GRID
========================================================== */

#kf-managed-it .kf-services {
  background: #fff;
}

#kf-managed-it .kf-services-head {
  margin-bottom: 38px;
  text-align: center;
}

#kf-managed-it .kf-services-head .kf-kicker {
  justify-content: center;
}

#kf-managed-it .kf-services-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
}

#kf-managed-it .kf-service-card {
  display: flex;
  flex-direction: column;
  min-height: 278px;
  padding: 28px 18px 24px;
  background: #fff;
  border: 1px solid var(--kf-border);
  border-radius: 14px;
  text-align: center;
  transition: all .28s ease;
}

#kf-managed-it .kf-service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(15,111,198,.35);
  box-shadow: var(--kf-shadow);
}

#kf-managed-it .kf-service-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kf-blue);
  font-size: 34px;
}

#kf-managed-it .kf-service-card h3 {
  margin-bottom: 10px;
  font-size: 17px;
}

#kf-managed-it .kf-service-card p {
  margin-bottom: 18px;
  color: var(--kf-muted);
  font-size: 13px;
  line-height: 1.55;
}

#kf-managed-it .kf-service-link {
  margin-top: auto;
  color: var(--kf-blue);
  font-size: 13px;
  font-weight: 800;
}

#kf-managed-it .kf-service-link:hover {
  color: var(--kf-orange);
}

/* ==========================================================
   LOCAL PARTNER SECTION
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/14.png
========================================================== */

#kf-managed-it .kf-local {
  padding: 0;
  background: var(--kf-navy);
  overflow: hidden;
}

#kf-managed-it .kf-local-grid {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: 500px;
}

#kf-managed-it .kf-local-image {
  min-height: 500px;
  background:
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/14.png")
    center / cover no-repeat;
}

#kf-managed-it .kf-local-copy {
  position: relative;
  display: flex;
  align-items: center;
  padding: 64px clamp(40px, 5vw, 88px);
  background:
    radial-gradient(circle at 82% 35%, rgba(15,111,198,.26), transparent 42%),
    linear-gradient(135deg, var(--kf-navy-dark), var(--kf-navy));
}

#kf-managed-it .kf-local-copy-inner {
  max-width: 720px;
}

#kf-managed-it .kf-local h2 {
  margin-bottom: 16px;
  color: #fff;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -1px;
}

#kf-managed-it .kf-local-copy p {
  max-width: 650px;
  color: rgba(255,255,255,.85);
  font-size: 16px;
}

#kf-managed-it .kf-checklist {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

#kf-managed-it .kf-checklist li {
  position: relative;
  padding-left: 34px;
  color: #fff;
  font-size: 14px;
  font-weight: 550;
}

#kf-managed-it .kf-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--kf-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

#kf-managed-it .kf-partner-card {
  position: absolute;
  right: 46px;
  top: 50%;
  transform: translateY(-50%);
  width: 205px;
  padding: 24px 20px;
  border-radius: 16px;
  background: rgba(5,29,53,.74);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 20px 48px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: center;
}

#kf-managed-it .kf-partner-card .kf-partner-icon {
  margin-bottom: 10px;
  color: var(--kf-orange);
  font-size: 36px;
}

#kf-managed-it .kf-partner-card h3 {
  margin-bottom: 10px;
  color: #fff;
  font-size: 18px;
}

#kf-managed-it .kf-partner-card p {
  margin: 0;
  color: rgba(255,255,255,.80);
  font-size: 13px;
}

/* leave visual room for side card */
#kf-managed-it .kf-local-copy-inner {
  padding-right: 220px;
}

/* ==========================================================
   PROCESS
========================================================== */

#kf-managed-it .kf-process {
  background: var(--kf-offwhite);
}

#kf-managed-it .kf-process-head {
  text-align: center;
  margin-bottom: 42px;
}

#kf-managed-it .kf-process-head .kf-kicker {
  justify-content: center;
}

#kf-managed-it .kf-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 36px;
}

#kf-managed-it .kf-process-step {
  position: relative;
  text-align: center;
  padding: 0 15px;
}

#kf-managed-it .kf-process-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 27px;
  right: -27px;
  color: var(--kf-navy);
  font-size: 30px;
  font-weight: 400;
}

#kf-managed-it .kf-step-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

#kf-managed-it .kf-step-number,
#kf-managed-it .kf-step-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

#kf-managed-it .kf-step-number {
  background: var(--kf-blue-soft);
  color: var(--kf-blue);
  font-size: 18px;
  font-weight: 900;
}

#kf-managed-it .kf-step-icon {
  background: #fff;
  color: var(--kf-blue);
  border: 1px solid var(--kf-border);
  box-shadow: 0 6px 18px rgba(8,43,80,.06);
  font-size: 22px;
}

#kf-managed-it .kf-process-step h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

#kf-managed-it .kf-process-step p {
  margin: 0;
  color: var(--kf-muted);
  font-size: 13px;
}

/* ==========================================================
   CYBERSECURITY
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/11.png
========================================================== */

#kf-managed-it .kf-security {
  position: relative;
  min-height: 450px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4,27,51,.98) 0%, rgba(4,27,51,.92) 38%, rgba(4,27,51,.40) 62%, rgba(4,27,51,.04) 100%),
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/11.png")
    center right / cover no-repeat;
}

#kf-managed-it .kf-security-content {
  max-width: 620px;
  padding: 65px 0;
}

#kf-managed-it .kf-security h2 {
  margin-bottom: 16px;
  color: #fff;
  font-size: clamp(36px, 4.2vw, 54px);
}

#kf-managed-it .kf-security p {
  max-width: 570px;
  margin-bottom: 28px;
  color: rgba(255,255,255,.90);
  font-size: 17px;
}

/* ==========================================================
   TESTIMONIALS
========================================================== */

#kf-managed-it .kf-testimonials {
  background: #fff;
}

#kf-managed-it .kf-testimonials-head {
  margin-bottom: 36px;
  text-align: center;
}

#kf-managed-it .kf-testimonials-head .kf-kicker {
  justify-content: center;
}

#kf-managed-it .kf-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
}

#kf-managed-it .kf-testimonial-card {
  padding: 28px 28px 26px;
  background: #fff;
  border: 1px solid var(--kf-border);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(8,43,80,.05);
}

#kf-managed-it .kf-stars {
  margin-bottom: 14px;
  color: var(--kf-orange);
  letter-spacing: 2px;
  font-size: 16px;
}

#kf-managed-it .kf-testimonial-card blockquote {
  margin: 0 0 22px;
  color: var(--kf-text);
  font-size: 15px;
  line-height: 1.65;
}

#kf-managed-it .kf-testimonial-name {
  color: var(--kf-navy);
  font-size: 13px;
  font-weight: 850;
}

#kf-managed-it .kf-testimonial-meta {
  color: var(--kf-muted);
  font-size: 12px;
}

/* ==========================================================
   FINAL CTA / FOOTER BAND
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/15.png
========================================================== */

#kf-managed-it .kf-final-cta {
  position: relative;
  min-height: 330px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4,27,51,.98) 0%, rgba(4,27,51,.90) 34%, rgba(4,27,51,.40) 62%, rgba(4,27,51,.16) 100%),
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/15.png")
    center / cover no-repeat;
}

#kf-managed-it .kf-final-grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 55px;
  align-items: center;
}

#kf-managed-it .kf-final-cta h2 {
  max-width: 700px;
  margin-bottom: 13px;
  color: #fff;
  font-size: clamp(36px, 4vw, 52px);
}

#kf-managed-it .kf-final-cta h2 span {
  color: var(--kf-orange);
}

#kf-managed-it .kf-final-cta p {
  max-width: 650px;
  margin-bottom: 24px;
  color: rgba(255,255,255,.88);
  font-size: 16px;
}

#kf-managed-it .kf-final-benefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

#kf-managed-it .kf-final-benefit {
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
}

#kf-managed-it .kf-final-benefit strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 26px;
}

/* ==========================================================
   FOOTER
========================================================== */

#kf-managed-it .kf-footer {
  padding: 24px 0;
  background: var(--kf-navy-dark);
  color: rgba(255,255,255,.68);
  font-size: 12px;
}

#kf-managed-it .kf-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

#kf-managed-it .kf-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

#kf-managed-it .kf-footer-links a {
  color: rgba(255,255,255,.75);
}

#kf-managed-it .kf-footer-links a:hover {
  color: var(--kf-orange);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1180px) {

  #kf-managed-it .kf-services-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  #kf-managed-it .kf-local-copy-inner {
    padding-right: 0;
  }

  #kf-managed-it .kf-partner-card {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 430px;
    margin-top: 28px;
    text-align: left;
  }
}

@media (max-width: 980px) {

  #kf-managed-it .kf-nav {
    display: none;
  }

  #kf-managed-it .kf-mobile-menu {
    display: block;
  }

  #kf-managed-it .kf-logo {
    width: 180px;
    flex-basis: 180px;
  }

  #kf-managed-it .kf-hero {
    min-height: 590px;
    background-position: 64% center;
  }

  #kf-managed-it .kf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4,27,51,.24);
  }

  #kf-managed-it .kf-hero-trust {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  #kf-managed-it .kf-local-grid {
    grid-template-columns: 1fr;
  }

  #kf-managed-it .kf-local-image {
    min-height: 430px;
  }

  #kf-managed-it .kf-local-copy {
    padding: 55px 36px;
  }

  #kf-managed-it .kf-process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 42px 24px;
  }

  #kf-managed-it .kf-process-step::after {
    display: none;
  }

  #kf-managed-it .kf-final-grid {
    grid-template-columns: 1fr;
  }

  #kf-managed-it .kf-final-benefits {
    max-width: 620px;
  }
}

@media (max-width: 767px) {

  #kf-managed-it .kf-wrap,
  #kf-managed-it .kf-header-inner {
    width: calc(100% - 32px);
  }

  #kf-managed-it .kf-section {
    padding: 58px 0;
  }

  #kf-managed-it .kf-hero {
    min-height: auto;
    background-position: 70% center;
  }

  #kf-managed-it .kf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4,27,51,.98), rgba(4,27,51,.85));
  }

  #kf-managed-it .kf-hero-content {
    padding: 68px 0 58px;
  }

  #kf-managed-it .kf-hero h1 {
    font-size: 42px;
  }

  #kf-managed-it .kf-hero-copy {
    font-size: 16px;
  }

  #kf-managed-it .kf-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #kf-managed-it .kf-btn,
  #kf-managed-it .kf-btn-outline {
    width: 100%;
  }

  #kf-managed-it .kf-services-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  #kf-managed-it .kf-local-image {
    min-height: 340px;
    background-position: center;
  }

  #kf-managed-it .kf-local-copy {
    padding: 48px 22px;
  }

  #kf-managed-it .kf-local h2 {
    font-size: 35px;
  }

  #kf-managed-it .kf-security {
    min-height: auto;
    background-position: 72% center;
  }

  #kf-managed-it .kf-security::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4,27,51,.35);
  }

  #kf-managed-it .kf-security-content {
    position: relative;
    z-index: 2;
  }

  #kf-managed-it .kf-testimonial-grid {
    grid-template-columns: 1fr;
  }

  #kf-managed-it .kf-final-cta {
    background-position: 70% center;
  }

  #kf-managed-it .kf-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4,27,51,.28);
  }

  #kf-managed-it .kf-final-grid {
    position: relative;
    z-index: 2;
  }

  #kf-managed-it .kf-final-benefits {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: left;
  }

  #kf-managed-it .kf-final-benefit {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
  }

  #kf-managed-it .kf-final-benefit strong {
    margin: 0;
  }

  #kf-managed-it .kf-footer-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {

  #kf-managed-it .kf-header-inner {
    min-height: 68px;
  }

  #kf-managed-it .kf-logo {
    width: 158px;
    flex-basis: 158px;
  }

  #kf-managed-it .kf-hero h1 {
    font-size: 36px;
    letter-spacing: -1px;
  }

  #kf-managed-it .kf-services-grid,
  #kf-managed-it .kf-process-grid {
    grid-template-columns: 1fr;
  }

  #kf-managed-it .kf-service-card {
    min-height: auto;
  }

  #kf-managed-it .kf-hero-trust {
    grid-template-columns: 1fr;
  }

  #kf-managed-it .kf-section-title {
    font-size: 31px;
  }

  #kf-managed-it .kf-local-image {
    min-height: 290px;
  }
}

/* WordPress admin bar */
body.admin-bar #kf-managed-it .kf-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar #kf-managed-it .kf-header {
    top: 46px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #kf-managed-it *,
  #kf-managed-it *::before,
  #kf-managed-it *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}


/* ================= WEBSITE DESIGN ================= */
/* ==========================================================
   KUARAFINE — WEBSITE DESIGN
   ELEMENTOR CUSTOM CSS — COMPLETE PAGE CSS
   AGENT KUARA PAGEBUILDER | STAGE 5
   Scope wrapper for matching HTML: #kf-website-design
========================================================== */

#kf-website-design {
  --kf-navy: #082b50;
  --kf-navy-2: #0d3b6a;
  --kf-navy-dark: #051d35;
  --kf-blue: #0f6fc6;
  --kf-blue-soft: #eaf4ff;
  --kf-orange: #ff6a00;
  --kf-orange-dark: #e65600;
  --kf-white: #ffffff;
  --kf-offwhite: #f7f9fc;
  --kf-text: #13233b;
  --kf-muted: #627086;
  --kf-border: #dce5ef;
  --kf-shadow: 0 14px 40px rgba(8, 43, 80, .10);
  --kf-radius: 16px;
  --kf-container: 1220px;

  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--kf-text);
  background: var(--kf-white);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

#kf-website-design *,
#kf-website-design *::before,
#kf-website-design *::after {
  box-sizing: border-box;
}

#kf-website-design img {
  display: block;
  max-width: 100%;
  height: auto;
}

#kf-website-design a {
  text-decoration: none;
  transition: all .25s ease;
}

#kf-website-design h1,
#kf-website-design h2,
#kf-website-design h3,
#kf-website-design h4,
#kf-website-design p {
  margin-top: 0;
}

#kf-website-design h1,
#kf-website-design h2,
#kf-website-design h3,
#kf-website-design h4 {
  font-family: Poppins, Inter, "Segoe UI", Arial, sans-serif;
  color: var(--kf-navy);
  line-height: 1.14;
}

#kf-website-design .kf-wrap {
  width: calc(100% - 48px);
  max-width: var(--kf-container);
  margin: 0 auto;
}

#kf-website-design .kf-section {
  position: relative;
  padding: 78px 0;
}

#kf-website-design .kf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--kf-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

#kf-website-design .kf-kicker::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 10px;
  background: currentColor;
}

#kf-website-design .kf-section-title {
  max-width: 860px;
  margin: 0 auto 12px;
  text-align: center;
  font-size: clamp(31px, 3.5vw, 46px);
  letter-spacing: -.8px;
}

#kf-website-design .kf-section-intro {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  color: var(--kf-muted);
  font-size: 16px;
}

/* ==========================================================
   PAGE HEADER / NAV
========================================================== */

#kf-website-design .kf-header {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid rgba(8,43,80,.08);
  box-shadow: 0 4px 18px rgba(8,43,80,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#kf-website-design .kf-header-inner {
  width: calc(100% - 48px);
  max-width: 1320px;
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

#kf-website-design .kf-logo {
  flex: 0 0 208px;
  width: 208px;
}

#kf-website-design .kf-logo img {
  max-height: 58px;
  object-fit: contain;
}

#kf-website-design .kf-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
}

#kf-website-design .kf-nav a {
  padding: 12px 13px;
  color: var(--kf-navy);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

#kf-website-design .kf-nav a:hover,
#kf-website-design .kf-nav a.kf-current {
  color: var(--kf-orange);
}

#kf-website-design .kf-header-cta {
  margin-left: 12px;
  padding: 13px 20px !important;
  background: var(--kf-orange);
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(255,106,0,.22);
}

#kf-website-design .kf-header-cta:hover {
  background: var(--kf-orange-dark);
  transform: translateY(-1px);
}

#kf-website-design .kf-mobile-menu {
  display: none;
  margin-left: auto;
  position: relative;
}

#kf-website-design .kf-mobile-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--kf-border);
  border-radius: 10px;
  background: var(--kf-offwhite);
  color: var(--kf-navy);
  cursor: pointer;
  list-style: none;
  font-size: 24px;
}

#kf-website-design .kf-mobile-menu summary::-webkit-details-marker {
  display: none;
}

#kf-website-design .kf-mobile-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(330px, calc(100vw - 32px));
  padding: 14px;
  background: #fff;
  border: 1px solid var(--kf-border);
  border-radius: 14px;
  box-shadow: var(--kf-shadow);
}

#kf-website-design .kf-mobile-panel a {
  display: block;
  padding: 12px 14px;
  color: var(--kf-navy);
  font-size: 14px;
  font-weight: 650;
  border-radius: 8px;
}

#kf-website-design .kf-mobile-panel a:hover {
  background: var(--kf-offwhite);
}

/* ==========================================================
   BUTTONS
========================================================== */

#kf-website-design .kf-btn,
#kf-website-design .kf-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

#kf-website-design .kf-btn {
  background: var(--kf-orange);
  color: #fff;
  box-shadow: 0 10px 28px rgba(255,106,0,.25);
}

#kf-website-design .kf-btn:hover {
  background: var(--kf-orange-dark);
  color: #fff;
  transform: translateY(-2px);
}

#kf-website-design .kf-btn-outline {
  border: 1.5px solid rgba(255,255,255,.82);
  color: #fff;
  background: rgba(255,255,255,.04);
}

#kf-website-design .kf-btn-outline:hover {
  background: #fff;
  color: var(--kf-navy);
}

/* ==========================================================
   HERO
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/20.png
========================================================== */

#kf-website-design .kf-hero {
  position: relative;
  min-height: 610px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4,27,51,.98) 0%, rgba(4,27,51,.94) 36%, rgba(4,27,51,.54) 60%, rgba(4,27,51,.14) 100%),
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/20.png") center right / cover no-repeat;
}

#kf-website-design .kf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 72%, rgba(2,17,32,.20) 100%);
}

#kf-website-design .kf-hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 82px 0 70px;
}

#kf-website-design .kf-hero .kf-kicker {
  color: var(--kf-orange);
}

#kf-website-design .kf-hero h1 {
  margin-bottom: 20px;
  color: #fff;
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -1.8px;
}

#kf-website-design .kf-hero h1 .kf-orange-text {
  color: var(--kf-orange);
}

#kf-website-design .kf-hero-copy {
  max-width: 590px;
  margin-bottom: 28px;
  color: rgba(255,255,255,.94);
  font-size: 18px;
  line-height: 1.6;
}

#kf-website-design .kf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 38px;
}

#kf-website-design .kf-hero-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  max-width: 660px;
}

#kf-website-design .kf-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

#kf-website-design .kf-trust-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--kf-blue);
  font-size: 17px;
}

/* ==========================================================
   SERVICES GRID
========================================================== */

#kf-website-design .kf-services {
  background: #fff;
}

#kf-website-design .kf-services-head {
  margin-bottom: 38px;
  text-align: center;
}

#kf-website-design .kf-services-head .kf-kicker {
  justify-content: center;
}

#kf-website-design .kf-services-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
}

#kf-website-design .kf-service-card {
  display: flex;
  flex-direction: column;
  min-height: 278px;
  padding: 28px 18px 24px;
  background: #fff;
  border: 1px solid var(--kf-border);
  border-radius: 14px;
  text-align: center;
  transition: all .28s ease;
}

#kf-website-design .kf-service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(15,111,198,.35);
  box-shadow: var(--kf-shadow);
}

#kf-website-design .kf-service-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kf-blue);
  font-size: 34px;
}

#kf-website-design .kf-service-card:nth-child(1) .kf-service-icon,
#kf-website-design .kf-service-card:nth-child(3) .kf-service-icon,
#kf-website-design .kf-service-card:nth-child(5) .kf-service-icon {
  color: var(--kf-orange);
}

#kf-website-design .kf-service-card h3 {
  margin-bottom: 10px;
  font-size: 17px;
}

#kf-website-design .kf-service-card p {
  margin-bottom: 18px;
  color: var(--kf-muted);
  font-size: 13px;
  line-height: 1.55;
}

#kf-website-design .kf-service-link {
  margin-top: auto;
  color: var(--kf-blue);
  font-size: 13px;
  font-weight: 800;
}

#kf-website-design .kf-service-link:hover {
  color: var(--kf-orange);
}

/* ==========================================================
   MORE THAN JUST A WEBSITE
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/21.png
========================================================== */

#kf-website-design .kf-partner {
  padding: 0;
  background: #fff;
  overflow: hidden;
}

#kf-website-design .kf-partner-grid {
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 500px;
}

#kf-website-design .kf-partner-image {
  min-height: 500px;
  background:
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/21.png")
    center / cover no-repeat;
}

#kf-website-design .kf-partner-copy {
  position: relative;
  display: flex;
  align-items: center;
  padding: 64px clamp(36px, 4.8vw, 72px);
}

#kf-website-design .kf-partner-copy-inner {
  max-width: 760px;
  padding-right: 250px;
}

#kf-website-design .kf-partner h2 {
  margin-bottom: 16px;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -1px;
}

#kf-website-design .kf-partner h2 .kf-orange-text {
  color: var(--kf-orange);
}

#kf-website-design .kf-partner-copy p {
  max-width: 620px;
  color: var(--kf-muted);
  font-size: 16px;
}

#kf-website-design .kf-checklist {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

#kf-website-design .kf-checklist li {
  position: relative;
  padding-left: 34px;
  color: var(--kf-text);
  font-size: 14px;
  font-weight: 550;
}

#kf-website-design .kf-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--kf-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

#kf-website-design .kf-results-card {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  padding: 28px 22px;
  border-radius: 18px;
  background: #f3f7fd;
  border: 1px solid var(--kf-border);
  box-shadow: 0 18px 40px rgba(8,43,80,.08);
  text-align: center;
}

#kf-website-design .kf-results-icon {
  margin-bottom: 12px;
  color: var(--kf-orange);
  font-size: 40px;
}

#kf-website-design .kf-results-card h3 {
  margin-bottom: 12px;
  font-size: 18px;
}

#kf-website-design .kf-results-card p {
  margin: 0;
  color: var(--kf-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* ==========================================================
   PROCESS
========================================================== */

#kf-website-design .kf-process {
  background: var(--kf-offwhite);
}

#kf-website-design .kf-process-head {
  text-align: center;
  margin-bottom: 42px;
}

#kf-website-design .kf-process-head .kf-kicker {
  justify-content: center;
}

#kf-website-design .kf-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 36px;
}

#kf-website-design .kf-process-step {
  position: relative;
  text-align: center;
  padding: 0 15px;
}

#kf-website-design .kf-process-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 27px;
  right: -27px;
  color: var(--kf-navy);
  font-size: 30px;
  font-weight: 400;
}

#kf-website-design .kf-step-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

#kf-website-design .kf-step-number,
#kf-website-design .kf-step-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

#kf-website-design .kf-step-number {
  background: var(--kf-blue-soft);
  color: var(--kf-blue);
  font-size: 18px;
  font-weight: 900;
}

#kf-website-design .kf-step-icon {
  background: #fff;
  color: var(--kf-blue);
  border: 1px solid var(--kf-border);
  box-shadow: 0 6px 18px rgba(8,43,80,.06);
  font-size: 22px;
}

#kf-website-design .kf-process-step h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

#kf-website-design .kf-process-step p {
  margin: 0;
  color: var(--kf-muted);
  font-size: 13px;
}

/* ==========================================================
   PORTFOLIO SHOWCASE
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/22.png
========================================================== */

#kf-website-design .kf-portfolio {
  padding: 0;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
  overflow: hidden;
}

#kf-website-design .kf-portfolio-grid {
  display: grid;
  grid-template-columns: 38% 62%;
  align-items: center;
  gap: 28px;
  min-height: 430px;
}

#kf-website-design .kf-portfolio-copy {
  padding: 68px 0;
}

#kf-website-design .kf-portfolio h2 {
  max-width: 480px;
  margin-bottom: 14px;
  font-size: clamp(34px, 4vw, 50px);
}

#kf-website-design .kf-portfolio-copy p {
  max-width: 450px;
  margin-bottom: 24px;
  color: var(--kf-muted);
  font-size: 16px;
}

#kf-website-design .kf-portfolio-art {
  min-height: 430px;
  background:
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/22.png")
    right center / contain no-repeat;
}

/* ==========================================================
   FINAL CTA / FOOTER BAND
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/23.png
========================================================== */

#kf-website-design .kf-final-cta {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4,27,51,.98) 0%, rgba(4,27,51,.90) 34%, rgba(4,27,51,.42) 62%, rgba(4,27,51,.16) 100%),
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/23.png")
    center / cover no-repeat;
}

#kf-website-design .kf-final-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 55px;
  align-items: center;
}

#kf-website-design .kf-final-cta h2 {
  max-width: 720px;
  margin-bottom: 13px;
  color: #fff;
  font-size: clamp(36px, 4vw, 52px);
}

#kf-website-design .kf-final-cta p {
  max-width: 620px;
  margin-bottom: 24px;
  color: rgba(255,255,255,.88);
  font-size: 16px;
}

#kf-website-design .kf-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

#kf-website-design .kf-final-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 24px 20px 18px;
  border-radius: 18px;
  background: rgba(3,21,40,.32);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#kf-website-design .kf-metric {
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

#kf-website-design .kf-metric strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
}

/* ==========================================================
   FOOTER
========================================================== */

#kf-website-design .kf-footer {
  padding: 24px 0;
  background: var(--kf-navy-dark);
  color: rgba(255,255,255,.68);
  font-size: 12px;
}

#kf-website-design .kf-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

#kf-website-design .kf-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

#kf-website-design .kf-footer-links a {
  color: rgba(255,255,255,.75);
}

#kf-website-design .kf-footer-links a:hover {
  color: var(--kf-orange);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1180px) {

  #kf-website-design .kf-services-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  #kf-website-design .kf-partner-copy-inner {
    padding-right: 0;
  }

  #kf-website-design .kf-results-card {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 420px;
    margin-top: 28px;
  }

  #kf-website-design .kf-portfolio-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #kf-website-design .kf-portfolio-art {
    min-height: 350px;
    background-position: center;
  }
}

@media (max-width: 980px) {

  #kf-website-design .kf-nav {
    display: none;
  }

  #kf-website-design .kf-mobile-menu {
    display: block;
  }

  #kf-website-design .kf-logo {
    width: 180px;
    flex-basis: 180px;
  }

  #kf-website-design .kf-hero {
    min-height: 590px;
    background-position: 64% center;
  }

  #kf-website-design .kf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4,27,51,.24);
  }

  #kf-website-design .kf-hero-trust {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  #kf-website-design .kf-partner-grid {
    grid-template-columns: 1fr;
  }

  #kf-website-design .kf-partner-image {
    min-height: 420px;
  }

  #kf-website-design .kf-partner-copy {
    padding: 55px 36px;
  }

  #kf-website-design .kf-process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 42px 24px;
  }

  #kf-website-design .kf-process-step::after {
    display: none;
  }

  #kf-website-design .kf-final-grid {
    grid-template-columns: 1fr;
  }

  #kf-website-design .kf-final-metrics {
    max-width: 720px;
  }
}

@media (max-width: 767px) {

  #kf-website-design .kf-wrap,
  #kf-website-design .kf-header-inner {
    width: calc(100% - 32px);
  }

  #kf-website-design .kf-section {
    padding: 58px 0;
  }

  #kf-website-design .kf-hero {
    min-height: auto;
    background-position: 70% center;
  }

  #kf-website-design .kf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4,27,51,.98), rgba(4,27,51,.85));
  }

  #kf-website-design .kf-hero-content {
    padding: 68px 0 58px;
  }

  #kf-website-design .kf-hero h1 {
    font-size: 42px;
  }

  #kf-website-design .kf-hero-copy {
    font-size: 16px;
  }

  #kf-website-design .kf-hero-actions,
  #kf-website-design .kf-final-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #kf-website-design .kf-btn,
  #kf-website-design .kf-btn-outline {
    width: 100%;
  }

  #kf-website-design .kf-services-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  #kf-website-design .kf-partner-image {
    min-height: 340px;
    background-position: center;
  }

  #kf-website-design .kf-partner-copy {
    padding: 48px 22px;
  }

  #kf-website-design .kf-partner h2 {
    font-size: 35px;
  }

  #kf-website-design .kf-portfolio-copy {
    padding: 54px 0 30px;
  }

  #kf-website-design .kf-portfolio-art {
    min-height: 260px;
    background-position: center bottom;
    background-size: contain;
  }

  #kf-website-design .kf-final-cta {
    background-position: 70% center;
  }

  #kf-website-design .kf-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4,27,51,.28);
  }

  #kf-website-design .kf-final-grid {
    position: relative;
    z-index: 2;
  }

  #kf-website-design .kf-final-metrics {
    grid-template-columns: 1fr;
    gap: 14px;
    text-align: left;
  }

  #kf-website-design .kf-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
  }

  #kf-website-design .kf-metric strong {
    margin: 0;
  }

  #kf-website-design .kf-footer-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {

  #kf-website-design .kf-header-inner {
    min-height: 68px;
  }

  #kf-website-design .kf-logo {
    width: 158px;
    flex-basis: 158px;
  }

  #kf-website-design .kf-hero h1 {
    font-size: 36px;
    letter-spacing: -1px;
  }

  #kf-website-design .kf-services-grid,
  #kf-website-design .kf-process-grid {
    grid-template-columns: 1fr;
  }

  #kf-website-design .kf-service-card {
    min-height: auto;
  }

  #kf-website-design .kf-hero-trust {
    grid-template-columns: 1fr;
  }

  #kf-website-design .kf-section-title {
    font-size: 31px;
  }

  #kf-website-design .kf-partner-image {
    min-height: 290px;
  }
}

/* WordPress admin bar */
body.admin-bar #kf-website-design .kf-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar #kf-website-design .kf-header {
    top: 46px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #kf-website-design *,
  #kf-website-design *::before,
  #kf-website-design *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}


/* ================= BRANDING ================= */
/* ==========================================================
   KUARAFINE — BRANDING & GRAPHIC DESIGN
   ELEMENTOR CUSTOM CSS — COMPLETE PAGE CSS
   AGENT KUARA PAGEBUILDER | STAGE 5
   Scope wrapper for matching HTML: #kf-branding-graphic-design
========================================================== */

#kf-branding-graphic-design {
  --kf-navy: #082b50;
  --kf-navy-2: #0d3b6a;
  --kf-navy-dark: #051d35;
  --kf-blue: #0f6fc6;
  --kf-blue-soft: #eaf4ff;
  --kf-orange: #ff6a00;
  --kf-orange-dark: #e65600;
  --kf-white: #ffffff;
  --kf-offwhite: #f7f9fc;
  --kf-text: #13233b;
  --kf-muted: #627086;
  --kf-border: #dce5ef;
  --kf-shadow: 0 14px 40px rgba(8, 43, 80, .10);
  --kf-radius: 16px;
  --kf-container: 1220px;

  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--kf-text);
  background: var(--kf-white);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

#kf-branding-graphic-design *,
#kf-branding-graphic-design *::before,
#kf-branding-graphic-design *::after {
  box-sizing: border-box;
}

#kf-branding-graphic-design img {
  display: block;
  max-width: 100%;
  height: auto;
}

#kf-branding-graphic-design a {
  text-decoration: none;
  transition: all .25s ease;
}

#kf-branding-graphic-design h1,
#kf-branding-graphic-design h2,
#kf-branding-graphic-design h3,
#kf-branding-graphic-design h4,
#kf-branding-graphic-design p {
  margin-top: 0;
}

#kf-branding-graphic-design h1,
#kf-branding-graphic-design h2,
#kf-branding-graphic-design h3,
#kf-branding-graphic-design h4 {
  font-family: Poppins, Inter, "Segoe UI", Arial, sans-serif;
  color: var(--kf-navy);
  line-height: 1.14;
}

#kf-branding-graphic-design .kf-wrap {
  width: calc(100% - 48px);
  max-width: var(--kf-container);
  margin: 0 auto;
}

#kf-branding-graphic-design .kf-section {
  position: relative;
  padding: 78px 0;
}

#kf-branding-graphic-design .kf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--kf-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

#kf-branding-graphic-design .kf-kicker::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 10px;
  background: currentColor;
}

#kf-branding-graphic-design .kf-section-title {
  max-width: 880px;
  margin: 0 auto 12px;
  text-align: center;
  font-size: clamp(31px, 3.5vw, 46px);
  letter-spacing: -.8px;
}

#kf-branding-graphic-design .kf-section-intro {
  max-width: 790px;
  margin: 0 auto;
  text-align: center;
  color: var(--kf-muted);
  font-size: 16px;
}

/* ==========================================================
   HEADER / NAV
========================================================== */

#kf-branding-graphic-design .kf-header {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid rgba(8,43,80,.08);
  box-shadow: 0 4px 18px rgba(8,43,80,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#kf-branding-graphic-design .kf-header-inner {
  width: calc(100% - 48px);
  max-width: 1320px;
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

#kf-branding-graphic-design .kf-logo {
  flex: 0 0 208px;
  width: 208px;
}

#kf-branding-graphic-design .kf-logo img {
  max-height: 58px;
  object-fit: contain;
}

#kf-branding-graphic-design .kf-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
}

#kf-branding-graphic-design .kf-nav a {
  padding: 12px 13px;
  color: var(--kf-navy);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

#kf-branding-graphic-design .kf-nav a:hover,
#kf-branding-graphic-design .kf-nav a.kf-current {
  color: var(--kf-orange);
}

#kf-branding-graphic-design .kf-header-cta {
  margin-left: 12px;
  padding: 13px 20px !important;
  background: var(--kf-orange);
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(255,106,0,.22);
}

#kf-branding-graphic-design .kf-header-cta:hover {
  background: var(--kf-orange-dark);
  transform: translateY(-1px);
}

#kf-branding-graphic-design .kf-mobile-menu {
  display: none;
  margin-left: auto;
  position: relative;
}

#kf-branding-graphic-design .kf-mobile-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--kf-border);
  border-radius: 10px;
  background: var(--kf-offwhite);
  color: var(--kf-navy);
  cursor: pointer;
  list-style: none;
  font-size: 24px;
}

#kf-branding-graphic-design .kf-mobile-menu summary::-webkit-details-marker {
  display: none;
}

#kf-branding-graphic-design .kf-mobile-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(330px, calc(100vw - 32px));
  padding: 14px;
  background: #fff;
  border: 1px solid var(--kf-border);
  border-radius: 14px;
  box-shadow: var(--kf-shadow);
}

#kf-branding-graphic-design .kf-mobile-panel a {
  display: block;
  padding: 12px 14px;
  color: var(--kf-navy);
  font-size: 14px;
  font-weight: 650;
  border-radius: 8px;
}

#kf-branding-graphic-design .kf-mobile-panel a:hover {
  background: var(--kf-offwhite);
}

/* ==========================================================
   BUTTONS
========================================================== */

#kf-branding-graphic-design .kf-btn,
#kf-branding-graphic-design .kf-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

#kf-branding-graphic-design .kf-btn {
  background: var(--kf-orange);
  color: #fff;
  box-shadow: 0 10px 28px rgba(255,106,0,.25);
}

#kf-branding-graphic-design .kf-btn:hover {
  background: var(--kf-orange-dark);
  color: #fff;
  transform: translateY(-2px);
}

#kf-branding-graphic-design .kf-btn-outline {
  border: 1.5px solid rgba(255,255,255,.82);
  color: #fff;
  background: rgba(255,255,255,.04);
}

#kf-branding-graphic-design .kf-btn-outline:hover {
  background: #fff;
  color: var(--kf-navy);
}

/* ==========================================================
   HERO
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/1a.png
========================================================== */

#kf-branding-graphic-design .kf-hero {
  position: relative;
  min-height: 610px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4,27,51,.98) 0%, rgba(4,27,51,.94) 36%, rgba(4,27,51,.54) 60%, rgba(4,27,51,.12) 100%),
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/1a.png")
    center right / cover no-repeat;
}

#kf-branding-graphic-design .kf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 72%, rgba(2,17,32,.20) 100%);
}

#kf-branding-graphic-design .kf-hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 82px 0 70px;
}

#kf-branding-graphic-design .kf-hero h1 {
  margin-bottom: 20px;
  color: #fff;
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -1.8px;
}

#kf-branding-graphic-design .kf-orange-text {
  color: var(--kf-orange);
}

#kf-branding-graphic-design .kf-hero-copy {
  max-width: 590px;
  margin-bottom: 28px;
  color: rgba(255,255,255,.94);
  font-size: 18px;
  line-height: 1.6;
}

#kf-branding-graphic-design .kf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 38px;
}

#kf-branding-graphic-design .kf-hero-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  max-width: 660px;
}

#kf-branding-graphic-design .kf-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

#kf-branding-graphic-design .kf-trust-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--kf-blue);
  font-size: 17px;
}

/* ==========================================================
   BRANDING SERVICES GRID
========================================================== */

#kf-branding-graphic-design .kf-services {
  background: #fff;
}

#kf-branding-graphic-design .kf-services-head {
  margin-bottom: 38px;
  text-align: center;
}

#kf-branding-graphic-design .kf-services-head .kf-kicker {
  justify-content: center;
}

#kf-branding-graphic-design .kf-services-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
}

#kf-branding-graphic-design .kf-service-card {
  display: flex;
  flex-direction: column;
  min-height: 292px;
  padding: 28px 18px 24px;
  background: #fff;
  border: 1px solid var(--kf-border);
  border-radius: 14px;
  text-align: center;
  transition: all .28s ease;
}

#kf-branding-graphic-design .kf-service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(15,111,198,.35);
  box-shadow: var(--kf-shadow);
}

#kf-branding-graphic-design .kf-service-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kf-blue);
  font-size: 34px;
}

#kf-branding-graphic-design .kf-service-card:nth-child(1) .kf-service-icon,
#kf-branding-graphic-design .kf-service-card:nth-child(4) .kf-service-icon,
#kf-branding-graphic-design .kf-service-card:nth-child(6) .kf-service-icon {
  color: var(--kf-orange);
}

#kf-branding-graphic-design .kf-service-card h3 {
  margin-bottom: 10px;
  font-size: 17px;
}

#kf-branding-graphic-design .kf-service-card p {
  margin-bottom: 18px;
  color: var(--kf-muted);
  font-size: 13px;
  line-height: 1.55;
}

#kf-branding-graphic-design .kf-service-link {
  margin-top: auto;
  color: var(--kf-blue);
  font-size: 13px;
  font-weight: 800;
}

#kf-branding-graphic-design .kf-service-link:hover {
  color: var(--kf-orange);
}

/* ==========================================================
   STRATEGIC PARTNER
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/2a.png
========================================================== */

#kf-branding-graphic-design .kf-strategy {
  padding: 0;
  background: #fff;
  overflow: hidden;
}

#kf-branding-graphic-design .kf-strategy-grid {
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 510px;
}

#kf-branding-graphic-design .kf-strategy-image {
  min-height: 510px;
  background:
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/2a.png")
    center / cover no-repeat;
}

#kf-branding-graphic-design .kf-strategy-copy {
  position: relative;
  display: flex;
  align-items: center;
  padding: 64px clamp(36px, 4.8vw, 72px);
}

#kf-branding-graphic-design .kf-strategy-copy-inner {
  max-width: 760px;
  padding-right: 245px;
}

#kf-branding-graphic-design .kf-strategy h2 {
  margin-bottom: 16px;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -1px;
}

#kf-branding-graphic-design .kf-strategy-copy p {
  max-width: 620px;
  color: var(--kf-muted);
  font-size: 16px;
}

#kf-branding-graphic-design .kf-checklist {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

#kf-branding-graphic-design .kf-checklist li {
  position: relative;
  padding-left: 34px;
  color: var(--kf-text);
  font-size: 14px;
  font-weight: 550;
}

#kf-branding-graphic-design .kf-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--kf-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

#kf-branding-graphic-design .kf-results-card {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  padding: 28px 22px;
  border-radius: 18px;
  background: #f3f7fd;
  border: 1px solid var(--kf-border);
  box-shadow: 0 18px 40px rgba(8,43,80,.08);
  text-align: center;
}

#kf-branding-graphic-design .kf-results-icon {
  margin-bottom: 12px;
  color: var(--kf-orange);
  font-size: 40px;
}

#kf-branding-graphic-design .kf-results-card h3 {
  margin-bottom: 12px;
  font-size: 18px;
}

#kf-branding-graphic-design .kf-results-card p {
  margin: 0;
  color: var(--kf-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* ==========================================================
   PROCESS
========================================================== */

#kf-branding-graphic-design .kf-process {
  background: var(--kf-offwhite);
}

#kf-branding-graphic-design .kf-process-head {
  text-align: center;
  margin-bottom: 42px;
}

#kf-branding-graphic-design .kf-process-head .kf-kicker {
  justify-content: center;
}

#kf-branding-graphic-design .kf-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 36px;
}

#kf-branding-graphic-design .kf-process-step {
  position: relative;
  text-align: center;
  padding: 0 15px;
}

#kf-branding-graphic-design .kf-process-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 27px;
  right: -27px;
  color: var(--kf-navy);
  font-size: 30px;
}

#kf-branding-graphic-design .kf-step-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

#kf-branding-graphic-design .kf-step-number,
#kf-branding-graphic-design .kf-step-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

#kf-branding-graphic-design .kf-step-number {
  background: var(--kf-blue-soft);
  color: var(--kf-blue);
  font-size: 18px;
  font-weight: 900;
}

#kf-branding-graphic-design .kf-step-icon {
  background: #fff;
  color: var(--kf-blue);
  border: 1px solid var(--kf-border);
  box-shadow: 0 6px 18px rgba(8,43,80,.06);
  font-size: 22px;
}

#kf-branding-graphic-design .kf-process-step h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

#kf-branding-graphic-design .kf-process-step p {
  margin: 0;
  color: var(--kf-muted);
  font-size: 13px;
}

/* ==========================================================
   PORTFOLIO / BRANDS WE HELPED BRING TO LIFE
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/brand.png
========================================================== */

#kf-branding-graphic-design .kf-portfolio {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

#kf-branding-graphic-design .kf-portfolio-grid {
  display: grid;
  grid-template-columns: 38% 62%;
  align-items: center;
  gap: 28px;
  min-height: 430px;
}

#kf-branding-graphic-design .kf-portfolio-copy {
  padding: 68px 0;
}

#kf-branding-graphic-design .kf-portfolio h2 {
  max-width: 500px;
  margin-bottom: 14px;
  font-size: clamp(34px, 4vw, 50px);
}

#kf-branding-graphic-design .kf-portfolio-copy p {
  max-width: 460px;
  margin-bottom: 24px;
  color: var(--kf-muted);
  font-size: 16px;
}

#kf-branding-graphic-design .kf-portfolio-art {
  min-height: 430px;
  background:
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/brand.png")
    right center / contain no-repeat;
}

/* ==========================================================
   FINAL CTA / FOOTER BAND
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/4.png
========================================================== */

#kf-branding-graphic-design .kf-final-cta {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4,27,51,.98) 0%, rgba(4,27,51,.92) 34%, rgba(4,27,51,.42) 62%, rgba(4,27,51,.16) 100%),
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/4.png")
    center / cover no-repeat;
}

#kf-branding-graphic-design .kf-final-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 55px;
  align-items: center;
}

#kf-branding-graphic-design .kf-final-cta h2 {
  max-width: 760px;
  margin-bottom: 13px;
  color: #fff;
  font-size: clamp(36px, 4vw, 52px);
}

#kf-branding-graphic-design .kf-final-cta p {
  max-width: 620px;
  margin-bottom: 24px;
  color: rgba(255,255,255,.88);
  font-size: 16px;
}

#kf-branding-graphic-design .kf-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

#kf-branding-graphic-design .kf-final-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 24px 20px 18px;
  border-radius: 18px;
  background: rgba(3,21,40,.32);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#kf-branding-graphic-design .kf-metric {
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

#kf-branding-graphic-design .kf-metric strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
}

/* ==========================================================
   FOOTER
========================================================== */

#kf-branding-graphic-design .kf-footer {
  padding: 24px 0;
  background: var(--kf-navy-dark);
  color: rgba(255,255,255,.68);
  font-size: 12px;
}

#kf-branding-graphic-design .kf-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

#kf-branding-graphic-design .kf-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

#kf-branding-graphic-design .kf-footer-links a {
  color: rgba(255,255,255,.75);
}

#kf-branding-graphic-design .kf-footer-links a:hover {
  color: var(--kf-orange);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1180px) {

  #kf-branding-graphic-design .kf-services-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  #kf-branding-graphic-design .kf-strategy-copy-inner {
    padding-right: 0;
  }

  #kf-branding-graphic-design .kf-results-card {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 420px;
    margin-top: 28px;
  }

  #kf-branding-graphic-design .kf-portfolio-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #kf-branding-graphic-design .kf-portfolio-art {
    min-height: 350px;
    background-position: center;
  }
}

@media (max-width: 980px) {

  #kf-branding-graphic-design .kf-nav {
    display: none;
  }

  #kf-branding-graphic-design .kf-mobile-menu {
    display: block;
  }

  #kf-branding-graphic-design .kf-logo {
    width: 180px;
    flex-basis: 180px;
  }

  #kf-branding-graphic-design .kf-hero {
    min-height: 590px;
    background-position: 64% center;
  }

  #kf-branding-graphic-design .kf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4,27,51,.24);
  }

  #kf-branding-graphic-design .kf-hero-trust {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  #kf-branding-graphic-design .kf-strategy-grid {
    grid-template-columns: 1fr;
  }

  #kf-branding-graphic-design .kf-strategy-image {
    min-height: 420px;
  }

  #kf-branding-graphic-design .kf-strategy-copy {
    padding: 55px 36px;
  }

  #kf-branding-graphic-design .kf-process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 42px 24px;
  }

  #kf-branding-graphic-design .kf-process-step::after {
    display: none;
  }

  #kf-branding-graphic-design .kf-final-grid {
    grid-template-columns: 1fr;
  }

  #kf-branding-graphic-design .kf-final-metrics {
    max-width: 720px;
  }
}

@media (max-width: 767px) {

  #kf-branding-graphic-design .kf-wrap,
  #kf-branding-graphic-design .kf-header-inner {
    width: calc(100% - 32px);
  }

  #kf-branding-graphic-design .kf-section {
    padding: 58px 0;
  }

  #kf-branding-graphic-design .kf-hero {
    min-height: auto;
    background-position: 70% center;
  }

  #kf-branding-graphic-design .kf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4,27,51,.98), rgba(4,27,51,.86));
  }

  #kf-branding-graphic-design .kf-hero-content {
    padding: 68px 0 58px;
  }

  #kf-branding-graphic-design .kf-hero h1 {
    font-size: 42px;
  }

  #kf-branding-graphic-design .kf-hero-copy {
    font-size: 16px;
  }

  #kf-branding-graphic-design .kf-hero-actions,
  #kf-branding-graphic-design .kf-final-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #kf-branding-graphic-design .kf-btn,
  #kf-branding-graphic-design .kf-btn-outline {
    width: 100%;
  }

  #kf-branding-graphic-design .kf-services-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  #kf-branding-graphic-design .kf-strategy-image {
    min-height: 340px;
    background-position: center;
  }

  #kf-branding-graphic-design .kf-strategy-copy {
    padding: 48px 22px;
  }

  #kf-branding-graphic-design .kf-strategy h2 {
    font-size: 35px;
  }

  #kf-branding-graphic-design .kf-portfolio-copy {
    padding: 54px 0 30px;
  }

  #kf-branding-graphic-design .kf-portfolio-art {
    min-height: 260px;
    background-position: center bottom;
    background-size: contain;
  }

  #kf-branding-graphic-design .kf-final-cta {
    background-position: 70% center;
  }

  #kf-branding-graphic-design .kf-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4,27,51,.28);
  }

  #kf-branding-graphic-design .kf-final-grid {
    position: relative;
    z-index: 2;
  }

  #kf-branding-graphic-design .kf-final-metrics {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #kf-branding-graphic-design .kf-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
  }

  #kf-branding-graphic-design .kf-metric strong {
    margin: 0;
  }

  #kf-branding-graphic-design .kf-footer-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {

  #kf-branding-graphic-design .kf-header-inner {
    min-height: 68px;
  }

  #kf-branding-graphic-design .kf-logo {
    width: 158px;
    flex-basis: 158px;
  }

  #kf-branding-graphic-design .kf-hero h1 {
    font-size: 36px;
    letter-spacing: -1px;
  }

  #kf-branding-graphic-design .kf-services-grid,
  #kf-branding-graphic-design .kf-process-grid {
    grid-template-columns: 1fr;
  }

  #kf-branding-graphic-design .kf-service-card {
    min-height: auto;
  }

  #kf-branding-graphic-design .kf-hero-trust {
    grid-template-columns: 1fr;
  }

  #kf-branding-graphic-design .kf-section-title {
    font-size: 31px;
  }

  #kf-branding-graphic-design .kf-strategy-image {
    min-height: 290px;
  }
}

/* WordPress admin bar */
body.admin-bar #kf-branding-graphic-design .kf-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar #kf-branding-graphic-design .kf-header {
    top: 46px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #kf-branding-graphic-design *,
  #kf-branding-graphic-design *::before,
  #kf-branding-graphic-design *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}


/* ================= DIGITAL MARKETING ================= */
/* ==========================================================
   KUARAFINE — DIGITAL MARKETING & SEO
   ELEMENTOR CUSTOM CSS — COMPLETE PAGE CSS
   AGENT KUARA PAGEBUILDER | STAGE 5
   Scope wrapper for matching HTML: #kf-digital-marketing-seo
========================================================== */

#kf-digital-marketing-seo {
  --kf-navy: #082b50;
  --kf-navy-2: #0d3b6a;
  --kf-navy-dark: #051d35;
  --kf-blue: #0f6fc6;
  --kf-blue-soft: #eaf4ff;
  --kf-orange: #ff6a00;
  --kf-orange-dark: #e65600;
  --kf-white: #ffffff;
  --kf-offwhite: #f7f9fc;
  --kf-text: #13233b;
  --kf-muted: #627086;
  --kf-border: #dce5ef;
  --kf-shadow: 0 14px 40px rgba(8, 43, 80, .10);
  --kf-radius: 16px;
  --kf-container: 1220px;

  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--kf-text);
  background: var(--kf-white);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

#kf-digital-marketing-seo *,
#kf-digital-marketing-seo *::before,
#kf-digital-marketing-seo *::after {
  box-sizing: border-box;
}

#kf-digital-marketing-seo img {
  display: block;
  max-width: 100%;
  height: auto;
}

#kf-digital-marketing-seo a {
  text-decoration: none;
  transition: all .25s ease;
}

#kf-digital-marketing-seo h1,
#kf-digital-marketing-seo h2,
#kf-digital-marketing-seo h3,
#kf-digital-marketing-seo h4,
#kf-digital-marketing-seo p {
  margin-top: 0;
}

#kf-digital-marketing-seo h1,
#kf-digital-marketing-seo h2,
#kf-digital-marketing-seo h3,
#kf-digital-marketing-seo h4 {
  font-family: Poppins, Inter, "Segoe UI", Arial, sans-serif;
  color: var(--kf-navy);
  line-height: 1.14;
}

#kf-digital-marketing-seo .kf-wrap {
  width: calc(100% - 48px);
  max-width: var(--kf-container);
  margin: 0 auto;
}

#kf-digital-marketing-seo .kf-section {
  position: relative;
  padding: 78px 0;
}

#kf-digital-marketing-seo .kf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--kf-orange);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

#kf-digital-marketing-seo .kf-kicker::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 10px;
  background: currentColor;
}

#kf-digital-marketing-seo .kf-section-title {
  max-width: 880px;
  margin: 0 auto 12px;
  text-align: center;
  font-size: clamp(31px, 3.5vw, 46px);
  letter-spacing: -.8px;
}

#kf-digital-marketing-seo .kf-section-intro {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  color: var(--kf-muted);
  font-size: 16px;
}

/* ==========================================================
   HEADER / NAV
========================================================== */

#kf-digital-marketing-seo .kf-header {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid rgba(8,43,80,.08);
  box-shadow: 0 4px 18px rgba(8,43,80,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#kf-digital-marketing-seo .kf-header-inner {
  width: calc(100% - 48px);
  max-width: 1320px;
  min-height: 76px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}

#kf-digital-marketing-seo .kf-logo {
  flex: 0 0 208px;
  width: 208px;
}

#kf-digital-marketing-seo .kf-logo img {
  max-height: 58px;
  object-fit: contain;
}

#kf-digital-marketing-seo .kf-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
}

#kf-digital-marketing-seo .kf-nav a {
  padding: 12px 13px;
  color: var(--kf-navy);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

#kf-digital-marketing-seo .kf-nav a:hover,
#kf-digital-marketing-seo .kf-nav a.kf-current {
  color: var(--kf-orange);
}

#kf-digital-marketing-seo .kf-header-cta {
  margin-left: 12px;
  padding: 13px 20px !important;
  background: var(--kf-orange);
  color: #fff !important;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(255,106,0,.22);
}

#kf-digital-marketing-seo .kf-header-cta:hover {
  background: var(--kf-orange-dark);
  transform: translateY(-1px);
}

#kf-digital-marketing-seo .kf-mobile-menu {
  display: none;
  margin-left: auto;
  position: relative;
}

#kf-digital-marketing-seo .kf-mobile-menu summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--kf-border);
  border-radius: 10px;
  background: var(--kf-offwhite);
  color: var(--kf-navy);
  cursor: pointer;
  list-style: none;
  font-size: 24px;
}

#kf-digital-marketing-seo .kf-mobile-menu summary::-webkit-details-marker {
  display: none;
}

#kf-digital-marketing-seo .kf-mobile-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(330px, calc(100vw - 32px));
  padding: 14px;
  background: #fff;
  border: 1px solid var(--kf-border);
  border-radius: 14px;
  box-shadow: var(--kf-shadow);
}

#kf-digital-marketing-seo .kf-mobile-panel a {
  display: block;
  padding: 12px 14px;
  color: var(--kf-navy);
  font-size: 14px;
  font-weight: 650;
  border-radius: 8px;
}

#kf-digital-marketing-seo .kf-mobile-panel a:hover {
  background: var(--kf-offwhite);
}

/* ==========================================================
   BUTTONS
========================================================== */

#kf-digital-marketing-seo .kf-btn,
#kf-digital-marketing-seo .kf-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

#kf-digital-marketing-seo .kf-btn {
  background: var(--kf-orange);
  color: #fff;
  box-shadow: 0 10px 28px rgba(255,106,0,.25);
}

#kf-digital-marketing-seo .kf-btn:hover {
  background: var(--kf-orange-dark);
  color: #fff;
  transform: translateY(-2px);
}

#kf-digital-marketing-seo .kf-btn-outline {
  border: 1.5px solid rgba(255,255,255,.82);
  color: #fff;
  background: rgba(255,255,255,.04);
}

#kf-digital-marketing-seo .kf-btn-outline:hover {
  background: #fff;
  color: var(--kf-navy);
}

/* ==========================================================
   HERO
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/26.png
========================================================== */

#kf-digital-marketing-seo .kf-hero {
  position: relative;
  min-height: 610px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4,27,51,.98) 0%, rgba(4,27,51,.94) 36%, rgba(4,27,51,.56) 60%, rgba(4,27,51,.12) 100%),
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/26.png")
    center right / cover no-repeat;
}

#kf-digital-marketing-seo .kf-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 72%, rgba(2,17,32,.20) 100%);
}

#kf-digital-marketing-seo .kf-hero-content {
  position: relative;
  z-index: 2;
  max-width: 640px;
  padding: 82px 0 70px;
}

#kf-digital-marketing-seo .kf-hero h1 {
  margin-bottom: 20px;
  color: #fff;
  font-size: clamp(44px, 5vw, 68px);
  font-weight: 800;
  letter-spacing: -1.8px;
}

#kf-digital-marketing-seo .kf-orange-text {
  color: var(--kf-orange);
}

#kf-digital-marketing-seo .kf-hero-copy {
  max-width: 590px;
  margin-bottom: 28px;
  color: rgba(255,255,255,.94);
  font-size: 18px;
  line-height: 1.6;
}

#kf-digital-marketing-seo .kf-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 38px;
}

#kf-digital-marketing-seo .kf-hero-trust {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  max-width: 650px;
}

#kf-digital-marketing-seo .kf-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

#kf-digital-marketing-seo .kf-trust-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  color: var(--kf-blue);
  font-size: 17px;
}

/* ==========================================================
   DIGITAL MARKETING SERVICES GRID
========================================================== */

#kf-digital-marketing-seo .kf-services {
  background: #fff;
}

#kf-digital-marketing-seo .kf-services-head {
  margin-bottom: 38px;
  text-align: center;
}

#kf-digital-marketing-seo .kf-services-head .kf-kicker {
  justify-content: center;
}

#kf-digital-marketing-seo .kf-services-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 14px;
}

#kf-digital-marketing-seo .kf-service-card {
  display: flex;
  flex-direction: column;
  min-height: 288px;
  padding: 28px 18px 24px;
  background: #fff;
  border: 1px solid var(--kf-border);
  border-radius: 14px;
  text-align: center;
  transition: all .28s ease;
}

#kf-digital-marketing-seo .kf-service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(15,111,198,.35);
  box-shadow: var(--kf-shadow);
}

#kf-digital-marketing-seo .kf-service-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kf-blue);
  font-size: 34px;
}

#kf-digital-marketing-seo .kf-service-card:nth-child(1) .kf-service-icon,
#kf-digital-marketing-seo .kf-service-card:nth-child(4) .kf-service-icon,
#kf-digital-marketing-seo .kf-service-card:nth-child(6) .kf-service-icon {
  color: var(--kf-orange);
}

#kf-digital-marketing-seo .kf-service-card h3 {
  margin-bottom: 10px;
  font-size: 17px;
}

#kf-digital-marketing-seo .kf-service-card p {
  margin-bottom: 18px;
  color: var(--kf-muted);
  font-size: 13px;
  line-height: 1.55;
}

#kf-digital-marketing-seo .kf-service-link {
  margin-top: auto;
  color: var(--kf-blue);
  font-size: 13px;
  font-weight: 800;
}

#kf-digital-marketing-seo .kf-service-link:hover {
  color: var(--kf-orange);
}

/* ==========================================================
   STRATEGIC PARTNER
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/25.png
========================================================== */

#kf-digital-marketing-seo .kf-strategy {
  padding: 0;
  background: #fff;
  overflow: hidden;
}

#kf-digital-marketing-seo .kf-strategy-grid {
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 510px;
}

#kf-digital-marketing-seo .kf-strategy-image {
  min-height: 510px;
  background:
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/25.png")
    center / cover no-repeat;
}

#kf-digital-marketing-seo .kf-strategy-copy {
  position: relative;
  display: flex;
  align-items: center;
  padding: 64px clamp(36px, 4.8vw, 72px);
}

#kf-digital-marketing-seo .kf-strategy-copy-inner {
  max-width: 760px;
  padding-right: 245px;
}

#kf-digital-marketing-seo .kf-strategy h2 {
  margin-bottom: 16px;
  font-size: clamp(34px, 4vw, 52px);
  letter-spacing: -1px;
}

#kf-digital-marketing-seo .kf-strategy-copy p {
  max-width: 620px;
  color: var(--kf-muted);
  font-size: 16px;
}

#kf-digital-marketing-seo .kf-checklist {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 13px;
}

#kf-digital-marketing-seo .kf-checklist li {
  position: relative;
  padding-left: 34px;
  color: var(--kf-text);
  font-size: 14px;
  font-weight: 550;
}

#kf-digital-marketing-seo .kf-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--kf-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

#kf-digital-marketing-seo .kf-results-card {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  padding: 28px 22px;
  border-radius: 18px;
  background: #f3f7fd;
  border: 1px solid var(--kf-border);
  box-shadow: 0 18px 40px rgba(8,43,80,.08);
  text-align: center;
}

#kf-digital-marketing-seo .kf-results-icon {
  margin-bottom: 12px;
  color: var(--kf-orange);
  font-size: 40px;
}

#kf-digital-marketing-seo .kf-results-card h3 {
  margin-bottom: 12px;
  font-size: 18px;
}

#kf-digital-marketing-seo .kf-results-card p {
  margin: 0;
  color: var(--kf-muted);
  font-size: 14px;
  line-height: 1.55;
}

/* ==========================================================
   PROCESS
========================================================== */

#kf-digital-marketing-seo .kf-process {
  background: var(--kf-offwhite);
}

#kf-digital-marketing-seo .kf-process-head {
  text-align: center;
  margin-bottom: 42px;
}

#kf-digital-marketing-seo .kf-process-head .kf-kicker {
  justify-content: center;
}

#kf-digital-marketing-seo .kf-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 36px;
}

#kf-digital-marketing-seo .kf-process-step {
  position: relative;
  text-align: center;
  padding: 0 15px;
}

#kf-digital-marketing-seo .kf-process-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  top: 27px;
  right: -27px;
  color: var(--kf-navy);
  font-size: 30px;
}

#kf-digital-marketing-seo .kf-step-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

#kf-digital-marketing-seo .kf-step-number,
#kf-digital-marketing-seo .kf-step-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

#kf-digital-marketing-seo .kf-step-number {
  background: var(--kf-blue-soft);
  color: var(--kf-blue);
  font-size: 18px;
  font-weight: 900;
}

#kf-digital-marketing-seo .kf-step-icon {
  background: #fff;
  color: var(--kf-blue);
  border: 1px solid var(--kf-border);
  box-shadow: 0 6px 18px rgba(8,43,80,.06);
  font-size: 22px;
}

#kf-digital-marketing-seo .kf-process-step h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

#kf-digital-marketing-seo .kf-process-step p {
  margin: 0;
  color: var(--kf-muted);
  font-size: 13px;
}

/* ==========================================================
   BUSINESS STANDOUT / CASE STUDY SECTION
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/26.png
   Note: same URL supplied for Hero and Standout section.
========================================================== */

#kf-digital-marketing-seo .kf-standout {
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
}

#kf-digital-marketing-seo .kf-standout-grid {
  display: grid;
  grid-template-columns: 38% 62%;
  align-items: center;
  gap: 28px;
  min-height: 430px;
}

#kf-digital-marketing-seo .kf-standout-copy {
  padding: 68px 0;
}

#kf-digital-marketing-seo .kf-standout h2 {
  max-width: 480px;
  margin-bottom: 14px;
  font-size: clamp(34px, 4vw, 50px);
}

#kf-digital-marketing-seo .kf-standout-copy p {
  max-width: 460px;
  margin-bottom: 24px;
  color: var(--kf-muted);
  font-size: 16px;
}

#kf-digital-marketing-seo .kf-standout-art {
  min-height: 430px;
  background:
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/26.png")
    right center / contain no-repeat;
}

/* ==========================================================
   FINAL CTA / FOOTER BAND
   Asset: https://www.kuarafine.com/wp-content/uploads/2026/09/27.png
========================================================== */

#kf-digital-marketing-seo .kf-final-cta {
  position: relative;
  min-height: 340px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(4,27,51,.98) 0%, rgba(4,27,51,.92) 34%, rgba(4,27,51,.42) 62%, rgba(4,27,51,.16) 100%),
    url("https://www.kuarafine.com/wp-content/uploads/2026/09/27.png")
    center / cover no-repeat;
}

#kf-digital-marketing-seo .kf-final-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 55px;
  align-items: center;
}

#kf-digital-marketing-seo .kf-final-cta h2 {
  max-width: 760px;
  margin-bottom: 13px;
  color: #fff;
  font-size: clamp(36px, 4vw, 52px);
}

#kf-digital-marketing-seo .kf-final-cta p {
  max-width: 620px;
  margin-bottom: 24px;
  color: rgba(255,255,255,.88);
  font-size: 16px;
}

#kf-digital-marketing-seo .kf-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

#kf-digital-marketing-seo .kf-final-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 24px 20px 18px;
  border-radius: 18px;
  background: rgba(3,21,40,.32);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#kf-digital-marketing-seo .kf-metric {
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

#kf-digital-marketing-seo .kf-metric strong {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-size: 30px;
  font-weight: 700;
}

/* ==========================================================
   FOOTER
========================================================== */

#kf-digital-marketing-seo .kf-footer {
  padding: 24px 0;
  background: var(--kf-navy-dark);
  color: rgba(255,255,255,.68);
  font-size: 12px;
}

#kf-digital-marketing-seo .kf-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

#kf-digital-marketing-seo .kf-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

#kf-digital-marketing-seo .kf-footer-links a {
  color: rgba(255,255,255,.75);
}

#kf-digital-marketing-seo .kf-footer-links a:hover {
  color: var(--kf-orange);
}

/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1180px) {

  #kf-digital-marketing-seo .kf-services-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }

  #kf-digital-marketing-seo .kf-strategy-copy-inner {
    padding-right: 0;
  }

  #kf-digital-marketing-seo .kf-results-card {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 420px;
    margin-top: 28px;
  }

  #kf-digital-marketing-seo .kf-standout-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  #kf-digital-marketing-seo .kf-standout-art {
    min-height: 350px;
    background-position: center;
  }
}

@media (max-width: 980px) {

  #kf-digital-marketing-seo .kf-nav {
    display: none;
  }

  #kf-digital-marketing-seo .kf-mobile-menu {
    display: block;
  }

  #kf-digital-marketing-seo .kf-logo {
    width: 180px;
    flex-basis: 180px;
  }

  #kf-digital-marketing-seo .kf-hero {
    min-height: 590px;
    background-position: 64% center;
  }

  #kf-digital-marketing-seo .kf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4,27,51,.24);
  }

  #kf-digital-marketing-seo .kf-hero-trust {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  #kf-digital-marketing-seo .kf-strategy-grid {
    grid-template-columns: 1fr;
  }

  #kf-digital-marketing-seo .kf-strategy-image {
    min-height: 420px;
  }

  #kf-digital-marketing-seo .kf-strategy-copy {
    padding: 55px 36px;
  }

  #kf-digital-marketing-seo .kf-process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 42px 24px;
  }

  #kf-digital-marketing-seo .kf-process-step::after {
    display: none;
  }

  #kf-digital-marketing-seo .kf-final-grid {
    grid-template-columns: 1fr;
  }

  #kf-digital-marketing-seo .kf-final-metrics {
    max-width: 720px;
  }
}

@media (max-width: 767px) {

  #kf-digital-marketing-seo .kf-wrap,
  #kf-digital-marketing-seo .kf-header-inner {
    width: calc(100% - 32px);
  }

  #kf-digital-marketing-seo .kf-section {
    padding: 58px 0;
  }

  #kf-digital-marketing-seo .kf-hero {
    min-height: auto;
    background-position: 70% center;
  }

  #kf-digital-marketing-seo .kf-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4,27,51,.98), rgba(4,27,51,.86));
  }

  #kf-digital-marketing-seo .kf-hero-content {
    padding: 68px 0 58px;
  }

  #kf-digital-marketing-seo .kf-hero h1 {
    font-size: 42px;
  }

  #kf-digital-marketing-seo .kf-hero-copy {
    font-size: 16px;
  }

  #kf-digital-marketing-seo .kf-hero-actions,
  #kf-digital-marketing-seo .kf-final-actions {
    flex-direction: column;
    align-items: stretch;
  }

  #kf-digital-marketing-seo .kf-btn,
  #kf-digital-marketing-seo .kf-btn-outline {
    width: 100%;
  }

  #kf-digital-marketing-seo .kf-services-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  #kf-digital-marketing-seo .kf-strategy-image {
    min-height: 340px;
    background-position: center;
  }

  #kf-digital-marketing-seo .kf-strategy-copy {
    padding: 48px 22px;
  }

  #kf-digital-marketing-seo .kf-strategy h2 {
    font-size: 35px;
  }

  #kf-digital-marketing-seo .kf-standout-copy {
    padding: 54px 0 30px;
  }

  #kf-digital-marketing-seo .kf-standout-art {
    min-height: 260px;
    background-position: center bottom;
    background-size: contain;
  }

  #kf-digital-marketing-seo .kf-final-cta {
    background-position: 70% center;
  }

  #kf-digital-marketing-seo .kf-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4,27,51,.28);
  }

  #kf-digital-marketing-seo .kf-final-grid {
    position: relative;
    z-index: 2;
  }

  #kf-digital-marketing-seo .kf-final-metrics {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #kf-digital-marketing-seo .kf-metric {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
  }

  #kf-digital-marketing-seo .kf-metric strong {
    margin: 0;
  }

  #kf-digital-marketing-seo .kf-footer-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 520px) {

  #kf-digital-marketing-seo .kf-header-inner {
    min-height: 68px;
  }

  #kf-digital-marketing-seo .kf-logo {
    width: 158px;
    flex-basis: 158px;
  }

  #kf-digital-marketing-seo .kf-hero h1 {
    font-size: 36px;
    letter-spacing: -1px;
  }

  #kf-digital-marketing-seo .kf-services-grid,
  #kf-digital-marketing-seo .kf-process-grid {
    grid-template-columns: 1fr;
  }

  #kf-digital-marketing-seo .kf-service-card {
    min-height: auto;
  }

  #kf-digital-marketing-seo .kf-hero-trust {
    grid-template-columns: 1fr;
  }

  #kf-digital-marketing-seo .kf-section-title {
    font-size: 31px;
  }

  #kf-digital-marketing-seo .kf-strategy-image {
    min-height: 290px;
  }
}

/* WordPress admin bar */
body.admin-bar #kf-digital-marketing-seo .kf-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar #kf-digital-marketing-seo .kf-header {
    top: 46px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  #kf-digital-marketing-seo *,
  #kf-digital-marketing-seo *::before,
  #kf-digital-marketing-seo *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}


/* ================= CONTACT ================= */
/* ==========================================================
   KUARAFINE — CONTACT US
   Global stylesheet version. Astra controls the header/menu.
========================================================== */
#kf-contact-us{
  --kf-navy:#082b50;--kf-navy-deep:#051d35;--kf-blue:#0f6fc6;--kf-blue-bright:#087df2;
  --kf-orange:#ff6a00;--kf-orange-dark:#e85f00;--kf-white:#fff;--kf-soft:#f6f9fd;--kf-soft-blue:#eef6fd;
  --kf-border:#dbe7f2;--kf-text:#24364b;--kf-muted:#64758a;--kf-shadow:0 18px 50px rgba(8,43,80,.10);
  --kf-shadow-soft:0 10px 28px rgba(8,43,80,.07);--kf-radius:20px;--kf-max:1240px;
  position:relative;width:100%;margin:0;padding:0;overflow:hidden;background:#fff;color:var(--kf-text);
  font-family:Inter,Poppins,"Segoe UI",Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
#kf-contact-us,#kf-contact-us *{box-sizing:border-box}
#kf-contact-us img{display:block;max-width:100%;height:auto}
#kf-contact-us a{color:inherit;text-decoration:none}
#kf-contact-us .kf-container{width:min(calc(100% - 48px),var(--kf-max));margin-inline:auto}
#kf-contact-us .kf-section{position:relative;padding:80px 0}
#kf-contact-us .kf-section-title{margin:0;color:var(--kf-navy);font-size:clamp(34px,4vw,56px);line-height:1.05;font-weight:800;letter-spacing:-1.8px}
#kf-contact-us .kf-orange{color:var(--kf-orange)}
#kf-contact-us .kf-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 14px;color:var(--kf-orange);font-size:13px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
#kf-contact-us .kf-eyebrow::before{content:"";width:34px;height:3px;flex:0 0 34px;border-radius:99px;background:var(--kf-orange)}
#kf-contact-us .kf-copy{margin:0;color:var(--kf-muted);font-size:18px;line-height:1.72}
#kf-contact-us .kf-btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
#kf-contact-us .kf-btn{min-height:54px;padding:14px 24px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:10px;font-size:15px;font-weight:800;line-height:1.2;transition:.2s ease}
#kf-contact-us .kf-btn:hover{transform:translateY(-2px)}
#kf-contact-us .kf-btn-primary{color:#fff;background:var(--kf-orange);border:2px solid var(--kf-orange);box-shadow:0 10px 28px rgba(255,106,0,.24)}
#kf-contact-us .kf-btn-primary:hover{color:#fff;background:var(--kf-orange-dark);border-color:var(--kf-orange-dark)}
#kf-contact-us .kf-btn-white-outline{color:#fff;border:2px solid rgba(255,255,255,.75);background:rgba(255,255,255,.05)}
#kf-contact-us .kf-btn-white-outline:hover{color:var(--kf-navy);background:#fff;border-color:#fff}
#kf-contact-us .kf-contact-hero{position:relative;min-height:520px;display:flex;align-items:center;color:#fff;isolation:isolate;background:linear-gradient(90deg,rgba(5,29,53,.98) 0%,rgba(8,43,80,.94) 35%,rgba(8,43,80,.66) 52%,rgba(8,43,80,.12) 73%,rgba(8,43,80,0) 100%),url("https://www.kuarafine.com/wp-content/uploads/2026/09/heros.png") center/cover no-repeat}
#kf-contact-us .kf-contact-hero-inner{min-height:520px;display:grid;grid-template-columns:minmax(0,620px) 1fr;align-items:center;padding-top:65px;padding-bottom:65px}
#kf-contact-us .kf-contact-hero-content{position:relative;z-index:2}
#kf-contact-us .kf-contact-hero .kf-eyebrow{color:#fff}
#kf-contact-us .kf-contact-hero h1{max-width:620px;margin:0;color:#fff;font-size:clamp(46px,5.6vw,72px);line-height:.99;font-weight:850;letter-spacing:-2.8px}
#kf-contact-us .kf-contact-hero .kf-hero-copy{max-width:590px;margin:22px 0 0;color:rgba(255,255,255,.92);font-size:20px;line-height:1.6}
#kf-contact-us .kf-contact-main{padding:64px 0 72px;background:#fff}
#kf-contact-us .kf-contact-layout{display:grid;grid-template-columns:330px minmax(0,1fr);gap:26px;align-items:stretch}
#kf-contact-us .kf-contact-card{overflow:hidden;background:#fff;border:1px solid var(--kf-border);border-radius:var(--kf-radius);box-shadow:var(--kf-shadow-soft)}
#kf-contact-us .kf-contact-list{padding:24px 24px 10px}
#kf-contact-us .kf-contact-item{display:grid;grid-template-columns:48px minmax(0,1fr);gap:14px;padding:17px 0;border-bottom:1px solid var(--kf-border)}
#kf-contact-us .kf-contact-item:last-child{border-bottom:0}
#kf-contact-us .kf-contact-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;background:var(--kf-orange);font-size:20px;font-weight:800}
#kf-contact-us .kf-contact-item h3{margin:0 0 4px;color:var(--kf-navy);font-size:16px;line-height:1.25;font-weight:800}
#kf-contact-us .kf-contact-item p,#kf-contact-us .kf-contact-item address{margin:0;color:var(--kf-text);font-size:15px;line-height:1.5;font-style:normal}
#kf-contact-us .kf-contact-item a:not(.kf-directions){color:var(--kf-blue);font-weight:700}
#kf-contact-us .kf-directions{display:inline-flex;margin-top:5px;color:var(--kf-blue);font-size:14px;font-weight:800}
#kf-contact-us .kf-hours{width:100%;border-collapse:collapse;color:var(--kf-text);font-size:14px}
#kf-contact-us .kf-hours td{padding:1px 0;vertical-align:top}
#kf-contact-us .kf-hours td:last-child{padding-left:15px;text-align:right;white-space:nowrap}
#kf-contact-us .kf-map{position:relative;min-height:210px;overflow:hidden;border-top:1px solid var(--kf-border);background:var(--kf-soft-blue)}
#kf-contact-us .kf-map iframe{display:block;width:100%;height:230px;border:0}
#kf-contact-us .kf-contact-actions{min-width:0;display:grid;gap:20px}
#kf-contact-us .kf-consult-card{padding:40px;background:#fff;border:1px solid var(--kf-border);border-radius:var(--kf-radius);box-shadow:var(--kf-shadow-soft)}
#kf-contact-us .kf-consult-card .kf-section-title{max-width:800px;font-size:clamp(34px,3.5vw,52px)}
#kf-contact-us .kf-consult-card .kf-copy{max-width:790px;margin-top:14px}
#kf-contact-us .kf-consult-primary{width:100%;min-height:64px;margin-top:28px;padding:16px 25px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:11px;color:#fff;background:var(--kf-orange);box-shadow:0 10px 26px rgba(255,106,0,.22);font-size:17px;font-weight:800;transition:.2s ease}
#kf-contact-us .kf-consult-primary:hover{color:#fff;background:var(--kf-orange-dark);transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,106,0,.28)}
#kf-contact-us .kf-or{position:relative;margin:24px 0;color:var(--kf-muted);text-align:center;font-size:13px;font-weight:800;text-transform:uppercase}
#kf-contact-us .kf-or::before,#kf-contact-us .kf-or::after{content:"";position:absolute;top:50%;width:43%;height:1px;background:var(--kf-border)}
#kf-contact-us .kf-or::before{left:0}#kf-contact-us .kf-or::after{right:0}
#kf-contact-us .kf-direct-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#kf-contact-us .kf-direct-actions a{min-height:54px;padding:12px 18px;display:flex;align-items:center;justify-content:center;gap:9px;border:2px solid var(--kf-blue);border-radius:10px;color:var(--kf-navy);background:#fff;font-size:15px;font-weight:800;transition:.2s ease}
#kf-contact-us .kf-direct-actions a:hover{color:#fff;background:var(--kf-blue);transform:translateY(-2px)}
#kf-contact-us .kf-specialized{padding:30px 34px;background:linear-gradient(135deg,#f8fbff 0%,#edf6fe 100%);border:1px solid #e1edf7;border-radius:var(--kf-radius)}
#kf-contact-us .kf-specialized-heading{display:flex;align-items:center;gap:12px;margin:0 0 24px;color:var(--kf-navy);font-size:20px;font-weight:800}
#kf-contact-us .kf-specialized-heading::before{content:"";width:32px;height:3px;border-radius:99px;background:var(--kf-orange)}
#kf-contact-us .kf-brand-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
#kf-contact-us .kf-brand-mini{min-width:0;padding:8px 24px;border-right:1px solid #cbdceb}
#kf-contact-us .kf-brand-mini:first-child{padding-left:0}#kf-contact-us .kf-brand-mini:last-child{padding-right:0;border-right:0}
#kf-contact-us .kf-brand-mini-logo{min-height:65px;display:flex;align-items:center;margin-bottom:10px}
#kf-contact-us .kf-brand-mini-logo img{width:auto;max-width:210px;max-height:62px;object-fit:contain}
#kf-contact-us .kf-brand-mini h3{margin:0;color:var(--kf-navy);font-size:19px;line-height:1.15;font-weight:800}
#kf-contact-us .kf-brand-mini p{margin:5px 0 8px;color:var(--kf-blue);font-size:14px;line-height:1.4}
#kf-contact-us .kf-brand-mini a{color:var(--kf-orange);font-size:14px;font-weight:800}
#kf-contact-us .kf-brockton{position:relative;overflow:hidden;min-height:370px;color:#fff;background:var(--kf-navy-deep)}
#kf-contact-us .kf-brockton-layout{min-height:370px;display:grid;grid-template-columns:1.08fr .92fr}
#kf-contact-us .kf-brockton-image{min-height:370px;background:url("https://www.kuarafine.com/wp-content/uploads/2026/09/5-1.png") center/cover no-repeat}
#kf-contact-us .kf-brockton-copy{display:flex;flex-direction:column;justify-content:center;padding:55px 56px;background:linear-gradient(115deg,rgba(8,43,80,.96),rgba(5,29,53,1))}
#kf-contact-us .kf-brockton-copy .kf-eyebrow{color:#fff}
#kf-contact-us .kf-brockton-copy h2{margin:0;color:#fff;font-size:clamp(36px,4vw,54px);line-height:1.02;font-weight:850;letter-spacing:-1.7px}
#kf-contact-us .kf-brockton-copy p{max-width:590px;margin:18px 0 0;color:rgba(255,255,255,.88);font-size:17px;line-height:1.7}
#kf-contact-us .kf-footer{background:#04192d;color:#fff}
#kf-contact-us .kf-footer-main{padding:56px 0 42px}
#kf-contact-us .kf-footer-grid{display:grid;grid-template-columns:1.45fr .8fr .8fr 1fr;gap:42px}
#kf-contact-us .kf-footer-logo img{width:210px;max-height:65px;object-fit:contain;filter:brightness(0) invert(1)}
#kf-contact-us .kf-footer-brand p{max-width:340px;margin:18px 0 0;color:rgba(255,255,255,.72);font-size:15px;line-height:1.65}
#kf-contact-us .kf-footer-column h3{margin:0 0 17px;color:#fff;font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:1px}
#kf-contact-us .kf-footer-column{display:flex;flex-direction:column;align-items:flex-start}
#kf-contact-us .kf-footer-column a,#kf-contact-us .kf-footer-column span{margin:0 0 9px;color:rgba(255,255,255,.72);font-size:14px;line-height:1.5}
#kf-contact-us .kf-footer-bottom{border-top:1px solid rgba(255,255,255,.10)}
#kf-contact-us .kf-footer-bottom-inner{min-height:68px;display:flex;align-items:center;justify-content:space-between;gap:25px;color:rgba(255,255,255,.58);font-size:13px}
@media(max-width:1180px){#kf-contact-us .kf-container{width:min(calc(100% - 40px),var(--kf-max))}#kf-contact-us .kf-contact-layout{grid-template-columns:300px minmax(0,1fr)}#kf-contact-us .kf-consult-card{padding:34px}#kf-contact-us .kf-brand-mini{padding-inline:18px}#kf-contact-us .kf-brand-mini-logo img{max-width:175px}#kf-contact-us .kf-brockton-copy{padding:45px 40px}}
@media(max-width:980px){#kf-contact-us .kf-contact-hero{min-height:590px;align-items:flex-end;background:linear-gradient(90deg,rgba(5,29,53,.98),rgba(8,43,80,.91) 50%,rgba(8,43,80,.38)),url("https://www.kuarafine.com/wp-content/uploads/2026/09/heros.png") 60% center/cover no-repeat}#kf-contact-us .kf-contact-hero-inner{min-height:590px;grid-template-columns:1fr;align-items:flex-end;padding-top:90px;padding-bottom:60px}#kf-contact-us .kf-contact-layout{grid-template-columns:1fr}#kf-contact-us .kf-contact-card{display:grid;grid-template-columns:1fr 1fr}#kf-contact-us .kf-map{min-height:100%;border-top:0;border-left:1px solid var(--kf-border)}#kf-contact-us .kf-map iframe{height:100%;min-height:430px}#kf-contact-us .kf-brand-row{grid-template-columns:1fr}#kf-contact-us .kf-brand-mini{padding:20px 0;border-right:0;border-bottom:1px solid #cbdceb}#kf-contact-us .kf-brand-mini:last-child{border-bottom:0}#kf-contact-us .kf-brockton-layout{grid-template-columns:1fr}#kf-contact-us .kf-brockton-image{min-height:330px}#kf-contact-us .kf-brockton-copy{min-height:330px}#kf-contact-us .kf-footer-grid{grid-template-columns:1.3fr 1fr 1fr}#kf-contact-us .kf-footer-brand{grid-column:1/-1}}
@media(max-width:767px){#kf-contact-us .kf-container{width:calc(100% - 32px)}#kf-contact-us .kf-contact-hero{min-height:570px;background:linear-gradient(180deg,rgba(5,29,53,.35),rgba(5,29,53,.58) 35%,rgba(5,29,53,.95) 67%,rgba(5,29,53,.99)),url("https://www.kuarafine.com/wp-content/uploads/2026/09/heros.png") 58% 35%/cover no-repeat}#kf-contact-us .kf-contact-hero-inner{min-height:570px;align-items:flex-end;padding-top:160px;padding-bottom:42px}#kf-contact-us .kf-contact-hero h1{font-size:clamp(40px,12vw,58px);letter-spacing:-2px}#kf-contact-us .kf-contact-hero .kf-hero-copy{font-size:17px}#kf-contact-us .kf-btn-row{flex-direction:column;align-items:stretch}#kf-contact-us .kf-btn{width:100%}#kf-contact-us .kf-contact-main{padding:42px 0 50px}#kf-contact-us .kf-contact-card{display:block}#kf-contact-us .kf-contact-list{padding:18px 20px 12px}#kf-contact-us .kf-contact-item{grid-template-columns:42px minmax(0,1fr);gap:12px;padding:15px 0}#kf-contact-us .kf-contact-icon{width:42px;height:42px}#kf-contact-us .kf-map{border-left:0;border-top:1px solid var(--kf-border)}#kf-contact-us .kf-map iframe{height:240px;min-height:240px}#kf-contact-us .kf-consult-card{padding:28px 22px}#kf-contact-us .kf-copy{font-size:16px}#kf-contact-us .kf-direct-actions{grid-template-columns:1fr}#kf-contact-us .kf-specialized{padding:26px 22px}#kf-contact-us .kf-brockton-image{min-height:260px}#kf-contact-us .kf-brockton-copy{min-height:auto;padding:40px 24px}#kf-contact-us .kf-footer-grid{grid-template-columns:1fr 1fr;gap:32px 22px}#kf-contact-us .kf-footer-brand{grid-column:1/-1}#kf-contact-us .kf-footer-bottom-inner{min-height:auto;padding:22px 0;flex-direction:column;align-items:flex-start;gap:10px}}
@media(max-width:520px){#kf-contact-us .kf-container{width:calc(100% - 28px)}#kf-contact-us .kf-contact-hero{min-height:590px}#kf-contact-us .kf-contact-hero-inner{min-height:590px}#kf-contact-us .kf-contact-hero h1{font-size:42px}#kf-contact-us .kf-contact-item p,#kf-contact-us .kf-contact-item address,#kf-contact-us .kf-hours{font-size:13.5px}#kf-contact-us .kf-consult-card{padding:25px 18px}#kf-contact-us .kf-specialized{padding:24px 18px}#kf-contact-us .kf-footer-grid{grid-template-columns:1fr}#kf-contact-us .kf-footer-brand{grid-column:auto}}