@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --red: #ff5a1f;
  --primary: #ff5a1f;
  --primary-dark: #c93800;
  --primary-soft: #fff1eb;
  --primary-glow: rgba(255, 90, 31, .24);
  --font-ui: "Manrope", "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --font-code: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; font-family: var(--font-ui); font-optical-sizing: auto; text-rendering: optimizeLegibility; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, h5, h6,
.brand-name,
.desktop-nav,
.ref-primary-button,
.ref-secondary-button { font-family: var(--font-display); }
.eyebrow,
.ref-kicker,
.ref-section-head > a,
.ref-popular { font-family: var(--font-code); }
::selection { background: var(--primary); color: #fff; }
:focus-visible { outline-color: var(--primary); }

/* One consistent login action, placed immediately left of Let's Talk. */
.header-client-login {
  color: #252529;
  border-right: 1px solid #dedee2;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 20px 0 2px;
  font-size: 11px;
  font-weight: 750;
  display: inline-flex;
  transition: color .2s ease, transform .2s ease;
}
.header-client-login b { color: var(--primary); font-size: 15px; transition: transform .2s ease; }
.header-client-login:hover { color: var(--primary); transform: translateY(-1px); }
.header-client-login:hover b { transform: translateX(3px); }

/* Premium code-workspace background: no circles, rings or orbit lines. */
.ref-hero::before,
.ref-hero-lines,
.ref-orbit,
.ref-signal-lines { display: none !important; }
.ref-hero-mesh {
  opacity: .62;
  animation: none !important;
  background-image:
    linear-gradient(rgba(255,90,31,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,90,31,.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.ref-hero-mesh::after {
  background: linear-gradient(90deg, transparent 0, rgba(255,90,31,.045) 48%, rgba(255,90,31,.13) 50%, rgba(255,90,31,.045) 52%, transparent 100%);
  animation: codeScan 9s linear infinite;
}
.hero-code-stream {
  z-index: 1;
  pointer-events: none;
  font-family: var(--font-code);
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(100deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(100deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.hero-code-column {
  color: rgba(110,66,48,.34);
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,248,244,.28));
  border-left: 1px solid rgba(255,90,31,.16);
  width: 330px;
  padding: 13px 0;
  position: absolute;
  box-shadow: 0 20px 60px rgba(81,44,26,.035);
  animation: codeCascade 13s ease-in-out infinite;
}
.hero-code-column::before {
  content: "01  02  03";
  color: rgba(255,90,31,.38);
  border-bottom: 1px solid rgba(255,90,31,.10);
  padding: 0 14px 9px;
  font-size: 7px;
  letter-spacing: .28em;
  display: block;
}
.hero-code-column span {
  grid-template-columns: 25px 1fr;
  gap: 9px;
  padding: 4px 14px;
  font-size: 8px;
  line-height: 1.55;
  white-space: nowrap;
  display: grid;
}
.hero-code-column span::before { content: attr(data-line); color: rgba(255,90,31,.34); text-align: right; }
.hero-code-column b { color: rgba(255,90,31,.48); font-weight: 600; }
.hero-code-column-one { top: 9%; left: -105px; transform: rotate(-2deg); }
.hero-code-column-two { top: 8%; right: -100px; animation-delay: -6s; }
.hero-code-column-three { bottom: 2%; left: 42%; width: 270px; animation-delay: -9s; }
.hero-build-track {
  color: rgba(115,71,51,.48);
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,90,31,.13);
  gap: 8px;
  align-items: center;
  padding: 8px 11px;
  font-size: 7px;
  letter-spacing: .1em;
  position: absolute;
  right: 7%;
  bottom: 8%;
  display: flex;
  animation: buildPulse 4.5s ease-in-out infinite;
}
.hero-build-track i { background: var(--primary); width: 5px; height: 5px; box-shadow: 0 0 12px var(--primary-glow); }
.hero-build-track b { color: var(--primary); font-weight: 700; }
@keyframes codeCascade { 0%,100% { opacity: .46; transform: translateY(0); } 50% { opacity: .82; transform: translateY(-18px); } }
@keyframes codeScan { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
@keyframes buildPulse { 0%,100% { opacity: .48; transform: translateY(0); } 50% { opacity: .9; transform: translateY(-4px); } }

/* The exact header logo is reused in every footer without color filters. */
.footer .brand-logo-frame,
.ref-footer .brand-logo-frame {
  background: transparent !important;
  border-radius: 0;
  width: 66px;
  height: 40px;
  padding: 0;
}
.footer .brand-logo-frame img,
.ref-footer .brand-logo-frame img,
.brand-light .brand-logo-frame img { filter: none !important; object-fit: contain; }
.brand-light .brand-logo-frame::after { display: none !important; }

.portal-logout-link {
  z-index: 9999;
  color: #fff;
  background: var(--primary);
  border-radius: 9px;
  padding: 11px 16px;
  font: 700 12px var(--font-ui);
  position: fixed;
  right: 18px;
  bottom: 18px;
  box-shadow: 0 12px 30px var(--primary-glow);
}
.portal-logout-link:hover { background: var(--primary-dark); transform: translateY(-2px); }

@media (max-width: 900px) {
  .header-client-login { display: none; }
  .hero-code-column-one { display: none; }
  .hero-code-column-two { right: -145px; opacity: .62; }
  .hero-code-column-three { left: 8%; bottom: 4%; }

  body.mobile-nav-open { overflow: hidden; }
  .site-header-wrap .site-header { z-index: 73; position: relative; }
  .menu-button {
    z-index: 74;
    color: #171719;
    background: #fff7f2 !important;
    border: 1px solid rgba(255,90,31,.18) !important;
    border-radius: 11px !important;
    width: 42px !important;
    height: 42px !important;
    position: relative;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
  }
  .menu-button:hover,
  .menu-button[aria-expanded="true"] { background: #ffede5 !important; border-color: rgba(255,90,31,.42) !important; }
  .menu-button[aria-expanded="true"] { transform: rotate(2deg); }
  .menu-button svg { transition: opacity .18s ease, transform .2s ease; }
  .menu-button[aria-expanded="true"] svg { opacity: 0; transform: scale(.75); }
  .menu-button::before,
  .menu-button::after {
    content: "";
    background: var(--primary);
    border-radius: 2px;
    width: 18px;
    height: 2px;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: opacity .18s ease, transform .24s ease;
  }
  .menu-button[aria-expanded="true"]::before { opacity: 1; transform: translate(-50%,-50%) rotate(45deg); }
  .menu-button[aria-expanded="true"]::after { opacity: 1; transform: translate(-50%,-50%) rotate(-45deg); }

  .mobile-menu-backdrop {
    z-index: 70;
    background: rgba(79,57,45,.16);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: 0;
    width: auto;
    height: auto;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    position: fixed;
    inset: 0;
    transition: opacity .24s ease, visibility .24s ease;
  }
  .mobile-menu-backdrop.is-open { opacity: 1; visibility: visible; }

  .site-header-wrap .mobile-menu {
    z-index: 72;
    color: #1b1b1e;
    background: rgba(255,255,255,.985);
    border: 1px solid rgba(31,25,22,.10);
    border-radius: 18px;
    grid-template-rows: none !important;
    width: min(310px, calc(100vw - 32px));
    max-height: calc(100dvh - 104px);
    padding: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: block !important;
    position: fixed;
    top: 80px;
    right: 16px;
    overflow: auto;
    transform: translateY(-10px) scale(.97);
    transform-origin: top right;
    box-shadow: 0 24px 70px rgba(23,18,15,.20), 0 3px 14px rgba(23,18,15,.08);
    transition: opacity .22s ease, visibility .22s ease, transform .28s cubic-bezier(.2,.8,.2,1);
  }
  .site-header-wrap .mobile-menu.is-open {
    grid-template-rows: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .site-header-wrap .mobile-menu nav,
  .site-header-wrap .mobile-menu.is-open nav {
    min-height: 0;
    padding: 10px !important;
    overflow: visible;
  }
  .site-header-wrap .mobile-menu a {
    color: #242428;
    background: transparent;
    border: 0;
    border-radius: 11px;
    grid-template-columns: 24px minmax(0,1fr) 24px;
    align-items: center;
    gap: 10px;
    min-height: 47px;
    padding: 9px 11px;
    font-size: 14px;
    font-weight: 720;
    line-height: 1.2;
    transition: color .2s ease, background .2s ease, transform .2s ease;
  }
  .site-header-wrap .mobile-menu a + a { margin-top: 2px; }
  .site-header-wrap .mobile-menu a:hover,
  .site-header-wrap .mobile-menu a:focus-visible {
    color: var(--primary-dark);
    background: var(--primary-soft);
    transform: translateX(2px);
  }
  .site-header-wrap .mobile-menu a.is-active {
    color: var(--primary-dark);
    background: linear-gradient(90deg, #fff0e9, #fff9f6);
    box-shadow: inset 3px 0 0 var(--primary);
  }
  .site-header-wrap .mobile-menu a.is-active span { color: #fff; background: var(--primary); }
  .site-header-wrap .mobile-menu a span {
    color: var(--primary);
    background: #fff1eb;
    border-radius: 7px;
    place-items: center;
    width: 24px;
    height: 24px;
    font-size: 8px;
    font-weight: 850;
    display: grid;
  }
  .site-header-wrap .mobile-menu a b {
    color: var(--primary);
    text-align: center;
    font-size: 13px;
    transition: transform .2s ease;
  }
  .site-header-wrap .mobile-menu a:hover b { transform: translate(2px,-2px); }
  .site-header-wrap .mobile-menu .mobile-login {
    color: #fff;
    background: linear-gradient(135deg, #ff6b2d, var(--primary));
    border: 0;
    border-radius: 11px;
    grid-template-columns: minmax(0,1fr) 24px;
    min-height: 48px;
    margin-top: 8px;
    padding: 11px 14px;
    font-size: 11px;
    letter-spacing: .035em;
    box-shadow: 0 12px 26px var(--primary-glow);
  }
  .site-header-wrap .mobile-menu .mobile-login:hover,
  .site-header-wrap .mobile-menu .mobile-login:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #ff7a3f, #e64a12);
    transform: translateY(-1px);
  }
  .site-header-wrap .mobile-menu .mobile-login b { color: #fff; }
}
@media (max-width: 600px) {
  .ref-hero-mesh { background-size: 36px 36px; opacity: .48; }
  .hero-code-stream { opacity: .7; }
  .hero-code-column { width: 270px; }
  .hero-code-column span { font-size: 7px; }
  .hero-code-column-two { top: 19%; right: -175px; }
  .hero-code-column-three { left: -90px; bottom: 1%; }
  .hero-build-track { right: -45px; bottom: 11%; transform: scale(.9); }
  .footer .brand-logo-frame,
  .ref-footer .brand-logo-frame { width: 58px; height: 36px; }
  .site-header-wrap .mobile-menu {
    width: min(292px, calc(100vw - 24px));
    max-height: calc(100dvh - 88px);
    top: 72px;
    right: 12px;
    border-radius: 16px;
  }
  .site-header-wrap .mobile-menu a { min-height: 44px; padding: 8px 10px; font-size: 13px; }
  .site-header-wrap .mobile-menu .mobile-login { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-hero-mesh::after,
  .hero-code-column,
  .hero-build-track { animation: none !important; }
}

/* Store, projects and checkout */
[hidden] { display: none !important; }
.header-cart { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; }
.header-cart b { min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; color: #fff; background: #ff5a1f; border-radius: 999px; font-size: 8px; }
.home-store-heading { margin-top: 72px; }
.home-store-heading > div small { color: #ff5a1f; letter-spacing: .14em; font: 700 8px/1.3 var(--code); }
.home-store-heading > div h2 { margin-top: 7px; }
.home-store-grid { margin-top: 4px; }
.home-product-card .product-preview { height: 190px; }
.home-product-card .product-info { padding: 18px; }
.home-product-card .product-info > span { min-height: 54px; }
.cart-add-small { border: 0; background: transparent; color: #232327; padding: 5px 0; text-transform: uppercase; cursor: pointer; font: 800 8px/1 var(--code); }
.cart-add-small b { color: #ff5a1f; margin-left: 5px; }
.cart-add-small:hover { color: #ff5a1f; }
.store-empty { padding: 60px 20px; text-align: center; color: #77777d; }
.cart-toast { z-index: 500; position: fixed; right: 24px; bottom: 24px; max-width: min(340px,calc(100vw - 32px)); padding: 14px 18px; color: #fff; background: #19191e; border-left: 3px solid #ff5a1f; border-radius: 6px; font-size: 11px; font-weight: 700; opacity: 0; visibility: hidden; transform: translateY(14px); transition: .25s; box-shadow: 0 18px 50px #0003; }
.cart-toast.show { opacity: 1; visibility: visible; transform: none; }
.project-art-health { background: linear-gradient(135deg,#d8f0e4,#9ccfb8); }
.commerce-hero {
  padding: 48px 0 24px;
}
.commerce-hero-inner {
  max-width: 780px;
}
.commerce-hero .eyebrow,
.commerce-hero > span {
  font-family: var(--font-code, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: inline-block;
}
.commerce-hero h1 {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  margin: 8px 0 12px;
  letter-spacing: -0.04em;
  font-size: clamp(38px, 5.5vw, 68px);
  line-height: 1.05;
  color: #1e1e24;
  font-weight: 800;
}
.commerce-hero p {
  max-width: 640px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Cart & Checkout Layout */
.cart-layout,
.checkout-layout {
  padding-top: 12px;
  padding-bottom: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(320px, 0.88fr);
  gap: 32px;
  align-items: start;
}

.cart-left-col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Cart Items Container */
.cart-items-card,
.cart-items,
.checkout-form {
  border: 1px solid #e4e6ee;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.025);
  overflow: hidden;
}

/* Empty Cart State */
.cart-empty {
  padding: 56px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cart-empty-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #fff5f0;
  border: 1px solid #fed7aa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 18px;
}
.cart-empty h2 {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 750;
  color: #1e1e24;
  letter-spacing: -0.02em;
}
.cart-empty p {
  color: #64748b;
  font-size: 13.5px;
  line-height: 1.55;
  max-width: 420px;
  margin: 0 0 24px;
}
.cart-empty-actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.cart-empty-actions .button {
  min-height: 44px;
  padding: 0 22px;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: all .2s ease;
}
.cart-empty-actions .button.button-red {
  background: var(--primary);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 14px rgba(255, 90, 31, 0.22);
}
.cart-empty-actions .button.button-red:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 90, 31, 0.32);
}
.cart-empty-actions .button.button-outline {
  background: #ffffff;
  color: #1e1e24;
  border: 1.5px solid #d1d5db;
}
.cart-empty-actions .button.button-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: #fff8f5;
  transform: translateY(-1px);
}

/* Cart Row */
.cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 20px;
  align-items: center;
  padding: 22px 24px;
  border-bottom: 1px solid #f1f3f8;
}
.cart-row:last-child {
  border-bottom: 0;
}
.cart-row small {
  font-family: var(--font-code, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 750;
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 4px;
}
.cart-row h2 {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 750;
  color: #1e1e24;
  letter-spacing: -0.015em;
}
.cart-row span {
  font-size: 12.5px;
  color: #64748b;
}
.cart-row > strong {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 17px;
  font-weight: 750;
  color: #1e1e24;
}
.cart-row > button {
  color: #dc2626;
  background: #fee2e2;
  border: 0;
  border-radius: 6px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  transition: all .15s ease;
}
.cart-row > button:hover {
  background: #fecaca;
  color: #b91c1c;
}

/* Available Offers & Discounts Section */
.cart-offers-section {
  background: #ffffff;
  border: 1px solid #e4e6ee;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.025);
}
.cart-offers-header {
  margin-bottom: 18px;
}
.cart-offers-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cart-offers-badge-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff5f0;
  border: 1px solid #ffedd5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.cart-offers-title-wrap h3 {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 16.5px;
  font-weight: 750;
  color: #1e1e24;
  margin: 0 0 2px;
  letter-spacing: -0.015em;
}
.cart-offers-title-wrap p {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
}
.cart-offers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}
.offer-card {
  background: #fafafc;
  border: 1px solid #e4e6ee;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: all .2s ease;
}
.offer-card:hover {
  border-color: #cbd5e1;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
  transform: translateY(-2px);
}
.offer-card.is-active-offer {
  border-color: #22c55e;
  background: #f0fdf4;
  box-shadow: 0 0 0 1px #22c55e;
}
.offer-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.offer-code-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #fff7ed;
  border: 1px dashed #ff5a1f;
  color: var(--primary);
  font-family: var(--font-code, 'JetBrains Mono', monospace);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 6px;
}
.offer-badge {
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 750;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.offer-card h4 {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 14px;
  font-weight: 750;
  color: #1e1e24;
  margin: 2px 0 0;
  line-height: 1.35;
}
.offer-card small {
  font-size: 11.5px;
  color: #64748b;
  display: block;
  line-height: 1.45;
}
.offer-card-footer {
  display: flex;
  align-items: center;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.offer-apply-btn {
  background: #ffffff;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 11.5px;
  font-weight: 750;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: all .2s ease;
}
.offer-apply-btn:hover {
  background: var(--primary);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(255, 90, 31, 0.2);
}
.offer-apply-btn.is-applied {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
  pointer-events: none;
}

/* Order Summary Card (Sidebar) */
.cart-summary-card,
.cart-summary,
.checkout-summary {
  position: sticky;
  top: 95px;
  background: #ffffff;
  border: 1px solid #e4e6ee;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.025);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cart-summary-head,
.cart-summary-kicker,
.checkout-summary > span,
.checkout-block > span {
  font-family: var(--font-code, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
}

/* Coupon Box Inside Summary */
.cart-coupon-box,
.checkout-coupon-box {
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all .2s ease;
}
.cart-coupon-box:focus-within,
.checkout-coupon-box:focus-within {
  border-color: var(--primary);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.08);
}
.cart-coupon-input-group,
.checkout-coupon-input-group {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.cart-coupon-input-group input,
.checkout-coupon-input-group input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-code, 'JetBrains Mono', monospace);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1e1e24;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  transition: all .2s ease;
}
.cart-coupon-input-group input:focus,
.checkout-coupon-input-group input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(255, 90, 31, 0.12);
}
.coupon-apply-btn {
  height: 40px;
  padding: 0 16px;
  background: #1e1e24;
  color: #ffffff;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 12.5px;
  font-weight: 750;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
  flex-shrink: 0;
}
.coupon-apply-btn:hover {
  background: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 90, 31, 0.25);
}
.coupon-apply-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Applied Coupon Badge */
.cart-applied-coupon,
.checkout-applied-coupon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 8px 12px;
  width: 100%;
}
.applied-coupon-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.coupon-tag-badge {
  font-family: var(--font-code, 'JetBrains Mono', monospace);
  font-size: 12.5px;
  font-weight: 800;
  color: #15803d;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.coupon-tag-badge b {
  background: #dcfce7;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
[data-applied-coupon-summary] {
  font-size: 11.5px;
  font-weight: 600;
  color: #166534;
}
.coupon-remove-btn {
  background: transparent;
  border: none;
  color: #dc2626;
  font-size: 11.5px;
  font-weight: 750;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  transition: all .15s ease;
  flex-shrink: 0;
}
.coupon-remove-btn:hover {
  background: #fee2e2;
  color: #991b1b;
}

/* Coupon Inline Message */
.coupon-message {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  margin: 4px 0 0;
}
.coupon-message.is-success,
.coupon-message.success,
.coupon-message:not(.is-error):not(.error) {
  color: #16a34a;
}
.coupon-message.is-error,
.coupon-message.error {
  color: #dc2626;
}

/* Summary Breakdown Lines */
.cart-summary-breakdown,
.checkout-summary-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid #f1f3f8;
  border-bottom: 1px solid #f1f3f8;
}
.summary-line,
.cart-summary-breakdown p,
.checkout-summary-breakdown p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: #64748b;
  margin: 0;
}
.summary-line strong,
.cart-summary-breakdown p strong,
.checkout-summary-breakdown p strong {
  color: #1e1e24;
  font-weight: 700;
}
.cart-discount-row,
.checkout-discount-row {
  color: #16a34a !important;
  font-weight: 700;
}
.cart-discount-row strong,
.checkout-discount-row strong {
  color: #16a34a !important;
  font-weight: 800;
  font-size: 14px;
}
.summary-line.text-muted {
  font-size: 12px;
  color: #94a3b8;
}

/* Total Row */
.cart-summary-total-wrap {
  padding: 4px 0;
}
.summary-total-line,
.cart-total,
.checkout-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 14.5px;
  font-weight: 750;
  color: #1e1e24;
  margin: 0;
}
.summary-total-line strong,
.cart-total strong,
.checkout-total-row strong {
  font-size: 24px;
  font-weight: 800;
  color: #1e1e24;
  letter-spacing: -0.02em;
}

/* Checkout Button & Notes */
.cart-checkout-btn,
.cart-checkout,
.checkout-submit {
  width: 100%;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  border-radius: 8px;
  background: var(--primary);
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: all .2s ease;
}
.cart-checkout-btn:hover,
.cart-checkout:hover,
.checkout-submit:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 90, 31, 0.28);
}
.cart-checkout.disabled,
.cart-checkout-btn.disabled,
.checkout-submit:disabled {
  pointer-events: none;
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.cart-summary-footer-note,
.cart-summary > small,
.checkout-summary > small {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  line-height: 1.5;
  margin: 0;
  display: block;
}

/* Checkout Form Specifics */
.checkout-form {
  padding: 28px;
}
.checkout-block + .checkout-block {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid #f1f3f8;
}
.checkout-fields {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.checkout-fields label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 750;
}
.checkout-fields input {
  width: 100%;
  height: 44px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  outline: 0;
  padding: 0 14px;
  font-size: 13px;
  color: #1e1e24;
  transition: all .2s ease;
}
.checkout-fields input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.12);
}
.payment-choice {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  cursor: pointer;
  transition: all .2s ease;
}
.payment-choice input {
  position: absolute;
  opacity: 0;
}
.payment-choice > i {
  width: 18px;
  height: 18px;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.payment-choice input:checked + i {
  border-color: var(--primary);
}
.payment-choice input:checked + i:after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--primary);
  border-radius: 50%;
}
.payment-choice:has(input:checked) {
  border-color: #fdba74;
  background: #fff8f5;
}
.payment-choice span {
  display: grid;
  gap: 2px;
}
.payment-choice b {
  font-size: 13px;
  color: #1e1e24;
}
.payment-choice small {
  color: #64748b;
  font-size: 11.5px;
}
.checkout-error {
  color: #dc2626;
  background: #fee2e2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  margin: 18px 0 0;
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.5;
}
.checkout-summary > div[data-checkout-items] {
  padding: 10px 0;
}
.checkout-summary > div[data-checkout-items] p {
  margin: 0;
  padding: 10px 0;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  border-bottom: 1px solid #f1f3f8;
  font-size: 12.5px;
}
.checkout-summary > div[data-checkout-items] p span {
  display: grid;
  gap: 2px;
}
.checkout-summary > div[data-checkout-items] p small {
  color: #8a8a90;
  text-transform: capitalize;
  font-size: 11px;
}

.order-success {
  min-height: 70vh;
  padding-top: 100px;
  padding-bottom: 80px;
  text-align: center;
  display: grid;
  justify-items: center;
}
.order-success-icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #16a34a;
  border-radius: 50%;
  font-size: 28px;
  box-shadow: 0 12px 30px rgba(22, 163, 74, 0.25);
}
.order-success small {
  margin-top: 24px;
  color: var(--primary);
  letter-spacing: 0.14em;
  font: 800 11px/1 var(--font-code, 'JetBrains Mono', monospace);
}
.order-success h1 {
  margin: 14px 0 12px;
  letter-spacing: -0.04em;
  font-size: clamp(40px, 5.5vw, 68px);
}
.order-success p {
  max-width: 580px;
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}
.order-success > strong {
  margin-top: 20px;
  padding: 10px 16px;
  background: #f1f5f9;
  border-radius: 6px;
  font: 700 12px/1 var(--font-code, 'JetBrains Mono', monospace);
  color: #1e293b;
}
.order-success > div {
  margin-top: 28px;
  display: flex;
  gap: 12px;
}

@media (max-width: 992px) {
  .cart-layout,
  .checkout-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cart-summary-card,
  .cart-summary,
  .checkout-summary {
    position: static;
  }
}
@media (max-width: 640px) {
  .commerce-hero {
    padding-top: 36px;
    padding-bottom: 20px;
  }
  .cart-row {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 16px;
  }
  .cart-row > button {
    grid-column: 1/-1;
    justify-self: start;
  }
  .checkout-form,
  .cart-summary-card,
  .cart-summary,
  .checkout-summary,
  .cart-offers-section {
    padding: 18px;
  }
  .checkout-fields {
    grid-template-columns: 1fr;
  }
  .order-success > div {
    width: 100%;
    flex-direction: column;
  }
}


/* Unified public-page language: light like the Home page */
.unified-public-page { color: #232327; background: #fff; }
.unified-public-page .page-hero,
.unified-public-page .store-hero,
.unified-public-page .case-hero,
.unified-public-page .legal-head {
  color: #232327;
  background:
    radial-gradient(circle at 82% 15%, #ff5a1f12 0, #ff5a1f00 29%),
    linear-gradient(180deg, #fff 0%, #fafafa 100%);
  border-bottom: 1px solid #e8e8eb;
  position: relative;
  overflow: hidden;
}
.unified-public-page .page-hero::before,
.unified-public-page .store-hero::before,
.unified-public-page .case-hero::before {
  content: '';
  opacity: .7;
  background-image: linear-gradient(#20202708 1px, transparent 1px), linear-gradient(90deg,#20202708 1px,transparent 1px);
  background-size: 64px 64px;
  position: absolute;
  inset: 0;
}
.unified-public-page .page-hero { padding-top: 82px; padding-bottom: 78px; }
.unified-public-page .store-hero { padding: 82px 0 78px; }
.unified-public-page .case-hero { padding: 78px 0 74px; }
.unified-public-page .legal-head { padding: 72px 0; }
.unified-public-page .page-hero > *,
.unified-public-page .store-hero > *,
.unified-public-page .case-hero > * { z-index: 1; position: relative; }
.unified-public-page .page-hero::after { content: 'AB / STUDIO'; position: absolute; right: max(4vw,24px); bottom: 14px; color: #ececef; letter-spacing: -.06em; font: 900 clamp(46px,8vw,118px)/.8 var(--code); }
.unified-public-page .page-hero h1,
.unified-public-page .store-hero h1,
.unified-public-page .case-hero h1,
.unified-public-page .legal-head h1,
.unified-public-page .commerce-hero h1,
.unified-public-page .contact-page h1 {
  max-width: none;
  margin-top: 18px;
  margin-bottom: 18px;
  color: #202024;
  letter-spacing: -.058em;
  font-size: clamp(42px,4.65vw,68px);
  line-height: 1.02;
  text-wrap: balance;
}
.unified-public-page .page-hero h1 br,
.unified-public-page .store-hero h1 br,
.unified-public-page .case-hero h1 br,
.unified-public-page .legal-head h1 br,
.unified-public-page .page-cta h2 br { display: none; }
.unified-public-page .page-hero h1 em::before,
.unified-public-page .store-hero h1 em::before { content: ' '; }
.unified-public-page .page-hero h1 em,
.unified-public-page .store-hero h1 em { color: #ff5a1f; }
.unified-public-page .page-hero > p,
.unified-public-page .store-hero p,
.unified-public-page .case-hero p,
.unified-public-page .legal-head p { color: #6f6f76; }
.unified-public-page .eyebrow-light { color: #ff5a1f; }
.unified-public-page .case-hero .shell > a { color: #727279; }
.unified-public-page .case-hero i { color: #55555c; background: #fff; border-color: #dbdbdf; }
.unified-public-page .service-orbit { border-color: #dedee2; background: #fff; box-shadow: 0 30px 80px #2828300c; }
.unified-public-page .service-orbit::before,
.unified-public-page .service-orbit::after { border-color: #e4e4e7; }
.unified-public-page .store-trust span { color: #5f5f66; }

/* Remove large black surfaces from secondary public pages. */
.unified-public-page .product-specs,
.unified-public-page .values-section,
.unified-public-page .contact-page,
.unified-public-page .error-page {
  color: #232327;
  background: #f7f7f8;
  border-top: 1px solid #e5e5e8;
  border-bottom: 1px solid #e5e5e8;
}
.unified-public-page .product-specs dl > div { border-color: #dcdce0; }
.unified-public-page .product-specs dt,
.unified-public-page .values-section p,
.unified-public-page .contact-page p { color: #707077; }
.unified-public-page .product-specs dd { color: #232327; }

/* Professional Services card system */
.unified-public-page .services-long-list {
  border: 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
}
.unified-public-page .services-long-list article {
  min-width: 0;
  min-height: 430px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: linear-gradient(145deg,#fff 0%,#fafafa 100%);
  border: 1px solid #e3e3e6;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  transition: transform .3s var(--premium-ease), border-color .3s, box-shadow .3s;
}
.unified-public-page .services-long-list article::before { content: ''; width: 120px; height: 120px; background: #ff5a1f0b; border-radius: 50%; position: absolute; top: -50px; right: -42px; }
.unified-public-page .services-long-list article:hover { transform: translateY(-8px); border-color: #ff5a1f55; box-shadow: 0 24px 55px #25252b18; }
.unified-public-page .service-index { width: 100%; align-items: flex-start; justify-content: space-between; gap: 20px; }
.unified-public-page .service-index span { order: 2; color: #aaaab0; letter-spacing: .12em; font: 700 9px/1 var(--code); }
.unified-public-page .service-index i {
  order: 1;
  width: 78px;
  height: 78px;
  color: #ff5a1f;
  background: linear-gradient(145deg,#fff1eb,#ffe3d6);
  border: 1px solid #ffd0bc;
  border-radius: 14px;
  box-shadow: inset 0 1px #fff,0 13px 26px #ff5a1f16;
  transition: color .25s,background .25s,transform .25s;
}
.unified-public-page .services-long-list article:hover .service-index i { color: #fff; background: #ff5a1f; transform: rotate(-3deg) scale(1.04); }
.unified-public-page .service-index svg { width: 34px; height: 34px; }
.unified-public-page .services-long-list article > div:last-child { flex: 1; display: flex; flex-direction: column; align-items: flex-start; }
.unified-public-page .services-long-list h2 { margin: 0 0 15px; color: #242429; font-size: 25px; line-height: 1.12; }
.unified-public-page .services-long-list p { min-height: 88px; margin: 0 0 20px; color: #707077; font-size: 12px; line-height: 1.72; }
.unified-public-page .services-long-list ul { margin: 0 0 25px; gap: 8px; }
.unified-public-page .services-long-list li { color: #57575e; font-size: 9px; }
.unified-public-page .services-long-list a { margin-top: auto; grid-column: auto; color: #2c2c31; border-bottom-color: #cfcfd4; font-size: 8px; }
.unified-public-page .services-long-list a:hover { color: #ff5a1f; border-bottom-color: #ff5a1f; }

@media (max-width: 1000px) {
  .unified-public-page .services-long-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .unified-public-page .service-detail-hero > .shell { grid-template-columns: 1fr; min-height: auto; }
}
@media (max-width: 680px) {
  .unified-public-page .page-hero,
  .unified-public-page .store-hero,
  .unified-public-page .service-detail-hero,
  .unified-public-page .case-hero,
  .unified-public-page .legal-head { padding-top: 58px; padding-bottom: 55px; }
  .unified-public-page .page-hero h1,
  .unified-public-page .store-hero h1,
  .unified-public-page .service-detail-hero h1,
  .unified-public-page .case-hero h1,
  .unified-public-page .legal-head h1,
  .unified-public-page .commerce-hero h1,
  .unified-public-page .contact-page h1 { font-size: 40px; line-height: 1.05; }
  .unified-public-page .page-hero::after { font-size: 50px; }
  .unified-public-page .services-long-list { grid-template-columns: 1fr; }
  .unified-public-page .services-long-list article { min-height: 390px; padding: 25px; }
  .unified-public-page .service-index i { width: 70px; height: 70px; }
}

/* Store page: fully light, no black surfaces */
.unified-public-page .store-hero {
  color: #232327 !important;
  background: linear-gradient(135deg,#ffffff 0%,#fff9f6 58%,#fff0e8 100%) !important;
  border-bottom-color: #f0ded5;
}
.unified-public-page .store-hero::before {
  opacity: .8;
  background-image: linear-gradient(#ff5a1f0b 1px,transparent 1px),linear-gradient(90deg,#ff5a1f0b 1px,transparent 1px) !important;
}
.unified-public-page .store-hero h1 { color: #202024 !important; }
.unified-public-page .store-hero p { color: #66666d !important; }
.unified-public-page .store-hero .store-trust span {
  color: #4f4f56;
  background: #fff;
  border: 1px solid #f0d9ce;
  border-radius: 999px;
  padding: 9px 13px;
  box-shadow: 0 8px 22px #ff5a1f0c;
}
.unified-public-page .store-catalog { background: #fff; }
.unified-public-page .store-toolbar label {
  background: #fff;
  border-color: #dfdfe3;
  border-radius: 10px;
  box-shadow: 0 10px 28px #25252a0a;
}
.unified-public-page .store-toolbar input,
.unified-public-page .store-toolbar select { color: #29292e; background: #fff; }
.unified-public-page .category-pills button {
  color: #55555c;
  background: #fff;
  border-color: #dedee2;
  border-radius: 999px;
  transition: color .2s,background .2s,border-color .2s,transform .2s;
}
.unified-public-page .category-pills button:hover { color: #ff5a1f; border-color: #ff9f77; transform: translateY(-2px); }
.unified-public-page .category-pills button.active {
  color: #fff;
  background: #ff5a1f;
  border-color: #ff5a1f;
  box-shadow: 0 9px 22px #ff5a1f2a;
}
.unified-public-page .store-catalog .product-card {
  background: #fff;
  border: 1px solid #e2e2e6;
  border-radius: 14px;
  box-shadow: 0 14px 38px #24242a10;
}
.unified-public-page .store-catalog .product-card:hover { border-color: #ffac89; box-shadow: 0 25px 55px #ff5a1f13; }
.unified-public-page .store-catalog .product-window {
  background: #fff;
  border: 7px solid #fff;
  border-radius: 9px;
  box-shadow: 0 19px 42px #57312424;
}
.unified-public-page .store-catalog .window-bar {
  background: #fff1ea;
  border-bottom: 1px solid #f6d8ca;
}
.unified-public-page .store-catalog .window-bar i { background: #ff9f77; }
.unified-public-page .store-catalog .window-bar i:nth-child(2) { background: #ffc05b; }
.unified-public-page .store-catalog .window-bar i:nth-child(3) { background: #74c69d; }
.unified-public-page .store-catalog .window-side { background: #fff8f4; border-color: #f0ddd4; }
.unified-public-page .store-catalog .window-kpis i,
.unified-public-page .store-catalog .window-rows i { background: #eeeef1; }
.unified-public-page .store-catalog .product-badge {
  color: #fff;
  background: #ff5a1f;
  border-radius: 5px;
  box-shadow: 0 8px 18px #ff5a1f31;
}
.unified-public-page .store-catalog .product-info h3,
.unified-public-page .store-catalog .product-price strong,
.unified-public-page .store-catalog .cart-add-small { color: #29292e; }
.unified-public-page .store-catalog .cart-add-small:hover { color: #ff5a1f; }
.unified-public-page .store-promise {
  color: #29292e;
  background: linear-gradient(180deg,#fff9f6,#fff);
  border-top: 1px solid #f0ded5;
}
.unified-public-page .store-promise .shell > div { border-color: #eaded8; }

/* Percentage grid tracks plus a gap must not exceed the viewport. */
.unified-public-page .about-story,
.unified-public-page .contact-page-grid { grid-template-columns:minmax(0,45fr) minmax(0,55fr); }
.unified-public-page .store-promise p { color: #6d6d74; }

/* Original jewellery dashboard artwork inside the existing hero devices */
.reference-home .ref-laptop-screen {
  background-color: #f7f2ed;
  background-image: url("/assets/images/hero-jewellery-dashboard-desktop-v2.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-clip: padding-box;
}
.reference-home .ref-laptop-screen > * { display: none !important; }
.reference-home .ref-phone {
  background-color: #fffaf6;
  background-image: url("/assets/images/hero-jewellery-dashboard-mobile-v2.png");
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-clip: padding-box;
  overflow: hidden;
  padding: 0;
}
.reference-home .ref-phone-copy { display: none !important; }
.reference-home .ref-phone-notch {
  position: absolute;
  z-index: 2;
  top: 6px;
  left: 50%;
  width: 38px;
  height: 9px;
  margin: 0;
  transform: translateX(-50%);
  box-shadow: 0 1px 4px #0003;
}

/* Keep the homepage header anchored while the page scrolls */
.reference-home { overflow: clip; }
.reference-home .site-header-wrap {
  position: sticky !important;
  z-index: 1000;
  top: 0;
  background: #fffffff7;
  box-shadow: 0 8px 28px #1f1f260d;
  isolation: isolate;
}

/* Larger brand typography; header height and logo dimensions stay unchanged. */
.site-header .brand-name {
  gap: 5px;
  font-size: 14px;
  letter-spacing: .19em;
}
.site-header .brand-name small {
  font-size: 7px;
  letter-spacing: .16em;
}

/* The underline follows the current page instead of always marking Home. */
.site-header .desktop-nav a,
.site-header .desktop-nav a:first-child:not([aria-current="page"]) {
  color: #161616;
}
.site-header .desktop-nav a::after {
  left: 50%;
  right: 50%;
}
.site-header .desktop-nav a:hover,
.site-header .desktop-nav a[aria-current="page"] {
  color: var(--primary);
}
.site-header .desktop-nav a:hover::after,
.site-header .desktop-nav a[aria-current="page"]::after {
  left: 0;
  right: 0;
}
.site-header-wrap .mobile-menu a[aria-current="page"] {
  color: #fff;
  background: var(--primary);
}

@media (max-width: 600px) {
  .site-header .brand-name {
    font-size: 11px;
    letter-spacing: .14em;
  }
  .site-header .brand-name small {
    font-size: 6px;
    letter-spacing: .1em;
  }
}

/* Payment-review policy pages and transparent business footer. */
.legal-body {
  width: min(860px, calc(100% - 40px));
  margin-top: 64px;
}
.legal-body p,
.legal-body li {
  color: #57575d;
  font-size: 14px;
  line-height: 1.8;
}
.legal-body p {
  margin: 0 0 14px;
}
.legal-body .legal-lead {
  color: #2a2a2f;
  font-size: 17px;
  line-height: 1.75;
}
.legal-body h2 {
  scroll-margin-top: 110px;
}
.legal-body a {
  color: #d94713;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal-body ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.legal-body li {
  padding-left: 22px;
  position: relative;
}
.legal-body li + li {
  margin-top: 8px;
}
.legal-body li::before {
  content: '✓';
  color: #ff5a1f;
  font-weight: 800;
  position: absolute;
  top: 0;
  left: 0;
}
.legal-summary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 34px 0 8px;
  display: grid;
}
.legal-summary-grid > div {
  background: #f7f7f8;
  border: 1px solid #e6e6e9;
  border-radius: 12px;
  padding: 20px;
}
.legal-summary-grid span {
  color: #d94713;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 9px;
  font-weight: 800;
}
.legal-summary-grid strong {
  margin: 12px 0 8px;
  color: #202024;
  font-size: 17px;
  line-height: 1.25;
  display: block;
}
.legal-summary-grid p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
}
.legal-contact-card {
  background: linear-gradient(135deg, #fff8f4, #fff);
  border: 1px solid #ffd9ca;
  border-left: 4px solid #ff5a1f;
  border-radius: 10px;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin-top: 20px;
  padding: 20px 22px;
  display: flex;
}
.legal-contact-card strong {
  color: #202024;
  font-size: 14px;
}
.legal-contact-card span,
.legal-contact-card a {
  font-size: 12px;
  line-height: 1.55;
}
.ref-footer-brand .ref-footer-trust {
  color: #d94713;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 7px;
  font-weight: 750;
  line-height: 1.5;
}
.ref-footer-grid h3 {
  color: #222227;
  letter-spacing: .02em;
  font-size: 11px;
}
.ref-footer-grid a {
  font-size: 10px;
  line-height: 1.45;
}
.ref-footer-brand > p {
  font-size: 10px;
}
.ref-footer-bottom {
  font-size: 9px;
}
.ref-footer-grid a:hover,
.ref-footer-grid a:focus-visible,
.ref-footer-bottom a:hover,
.ref-footer-bottom a:focus-visible {
  color: #d94713;
}
.ref-company-contact .ref-company-contact-row {
  margin-bottom: 3px;
}
.ref-footer-bottom {
  flex-wrap: wrap;
}
.checkout-summary > small a {
  color: #d94713;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 760px) {
  .legal-body {
    margin-top: 46px;
    margin-bottom: 78px;
  }
  .legal-summary-grid {
    grid-template-columns: 1fr;
  }
  .legal-summary-grid > div {
    padding: 17px;
  }
}

@media (max-width: 480px) {
  .legal-body {
    width: calc(100% - 30px);
  }
  .legal-body .legal-lead {
    font-size: 15px;
  }
  .legal-body h2 {
    margin-top: 36px;
    font-size: 23px;
  }
  .ref-footer-bottom,
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 12px !important;
    padding-top: 18px !important;
    padding-bottom: 20px !important;
  }
  .ref-footer-bottom > span,
  .ref-footer-bottom > p,
  .footer-bottom > span,
  .footer-bottom > p {
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 11.5px !important;
  }
  .ref-footer-bottom > div,
  .footer-bottom > div {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 10px 16px !important;
    width: 100% !important;
    margin-top: 2px !important;
  }
  .ref-footer-bottom > div a,
  .footer-bottom > div a {
    text-align: center !important;
    font-size: 11.5px !important;
  }
}

/* Compact the empty band directly below the public header. */
.unified-public-page > .site-header-wrap + .page-hero,
.unified-public-page > .site-header-wrap + .store-hero,
.unified-public-page > .site-header-wrap + .service-detail-hero,
.unified-public-page > .site-header-wrap + .case-hero,
.unified-public-page > .site-header-wrap + .legal-head {
  padding-top: 48px;
}

@media (max-width: 600px) {
  .unified-public-page > .site-header-wrap + .page-hero,
  .unified-public-page > .site-header-wrap + .store-hero,
  .unified-public-page > .site-header-wrap + .service-detail-hero,
  .unified-public-page > .site-header-wrap + .case-hero,
  .unified-public-page > .site-header-wrap + .legal-head {
    padding-top: 38px;
  }
}

/* Live syntax animation inside the existing hero code card. */
.reference-home .ref-code-note.is-code-running {
  padding: 14px 15px 12px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg, #fff, #fff9f7);
  border: 1px solid rgba(255,90,31,.13);
}
.ref-code-note .hero-code-toolbar {
  height: 17px;
  padding-bottom: 7px;
  border-bottom: 1px solid #27272d0d;
  display: flex;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}
.ref-code-note .hero-code-dots {
  display: flex;
  gap: 3px;
  padding: 0;
}
.ref-code-note .hero-code-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff5a1f;
}
.ref-code-note .hero-code-dots i:nth-child(2) { background: #ffbd2e; }
.ref-code-note .hero-code-dots i:nth-child(3) { background: #28c840; }
.ref-code-note .hero-code-toolbar > b {
  margin-right: auto;
  padding: 0;
  color: #8b8b93;
  letter-spacing: .08em;
  font: 700 5.5px/1 var(--font-code);
}
.ref-code-note .hero-code-status {
  color: #159b55;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  letter-spacing: .08em;
  font: 800 4.8px/1 var(--font-code);
}
.ref-code-note .hero-code-status i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1fbd68;
  box-shadow: 0 0 0 3px #1fbd6818;
  animation: heroCodePulse 1.25s ease-in-out infinite;
}
.ref-code-note .hero-code-display {
  min-height: 83px;
  margin-top: 8px;
  color: #555560;
  font: 600 6.7px/1.55 var(--font-code);
  display: block;
  position: relative;
  z-index: 2;
}
.ref-code-note .hero-code-display span { padding-left: 0; }
.ref-code-note .hero-code-line {
  min-height: 10px;
  color: #51515b;
  white-space: pre;
  display: block;
  opacity: 0;
  transform: translateX(-6px);
  animation: heroCodeLine .34s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: calc(var(--code-line) * 110ms + 80ms);
}
.ref-code-note .hero-code-line:last-child::after {
  content: '';
  width: 1px;
  height: .9em;
  margin-left: 2px;
  background: #ff5a1f;
  display: inline-block;
  vertical-align: -.08em;
  animation: heroCodeCaret .75s steps(1,end) infinite;
}
.ref-code-note .tok-keyword { color: #e43f7b; }
.ref-code-note .tok-function { color: #148ca3; }
.ref-code-note .tok-property { color: #7a50c7; }
.ref-code-note .tok-string { color: #15965d; }
.ref-code-note .tok-number { color: #e27822; }
.ref-code-note .tok-tag { color: #d65728; }
.ref-code-note .tok-comment { color: #a0a0a8; font-style: italic; }
.ref-code-note .hero-code-scan {
  z-index: 1;
  pointer-events: none;
  width: 42%;
  background: linear-gradient(90deg, transparent, #ff5a1f12, transparent);
  position: absolute;
  inset: 0 auto 0 -45%;
  animation: heroCodeScan 3.1s ease-in-out infinite;
}
@keyframes heroCodeLine {
  to { opacity: 1; transform: none; }
}
@keyframes heroCodeCaret {
  50% { opacity: 0; }
}
@keyframes heroCodePulse {
  50% { opacity: .45; transform: scale(.75); }
}
@keyframes heroCodeScan {
  55%,100% { left: 112%; }
}
@media (max-width: 600px) {
  .reference-home .ref-code-note.is-code-running { padding: 10px 11px 9px; }
  .ref-code-note .hero-code-toolbar { height: 14px; padding-bottom: 5px; }
  .ref-code-note .hero-code-toolbar > b { font-size: 4.5px; }
  .ref-code-note .hero-code-status { font-size: 4px; }
  .ref-code-note .hero-code-display { min-height: 63px; margin-top: 6px; font-size: 5.2px; line-height: 1.48; }
  .ref-code-note .hero-code-line { min-height: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .ref-code-note .hero-code-line { opacity: 1; transform: none; animation: none; }
  .ref-code-note .hero-code-status i,
  .ref-code-note .hero-code-line:last-child::after,
  .ref-code-note .hero-code-scan { animation: none; }
}

/* Keep header height same on Home + Services/Store/Projects/Pricing/About/Blog — remove wrap */
.site-header,
.reference-home .site-header,
.unified-public-page .site-header {
  height: 52px !important;
  min-height: 52px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
.site-header-wrap,
.reference-home .site-header-wrap,
.unified-public-page .site-header-wrap {
  height: 52px !important;
  min-height: 52px !important;
  flex-wrap: nowrap !important;
}
.desktop-nav,
.header-actions {
  flex-wrap: nowrap !important;
  white-space: nowrap;
}
@media (min-width: 761px) {
  .site-header-wrap,
  .reference-home .site-header-wrap,
  .unified-public-page .site-header-wrap {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0;
  }
  .site-header-wrap > .mobile-menu,
  .reference-home .site-header-wrap > .mobile-menu,
  .unified-public-page .site-header-wrap > .mobile-menu {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
}
@media (max-width: 760px) {
  .site-header,
  .reference-home .site-header,
  .unified-public-page .site-header,
  .site-header-wrap,
  .reference-home .site-header-wrap,
  .unified-public-page .site-header-wrap {
    height: 66px !important;
    min-height: 66px !important;
  }
}

/* Prevent header wrap on Services / About and all public pages at intermediate widths */
@media (max-width: 1100px) and (min-width: 901px) {
  .site-header {
    gap: 14px !important;
  }
  .desktop-nav {
    gap: 16px !important;
    font-size: 11px !important;
  }
  .header-actions {
    gap: 10px !important;
  }
  .header-client-login {
    padding-right: 10px !important;
    font-size: 10px !important;
  }
  .header-talk {
    padding-left: 12px !important;
    gap: 8px !important;
  }
}

/* Uploaded thumbnails, live demos and responsive screenshot galleries */
.catalog-card-thumbnail, .project-list-thumbnail, .ref-project-stage img, .product-preview img, .project-art img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: top center !important;
}

.product-preview.has-uploaded-thumbnail,
.ref-project-stage.has-uploaded-thumbnail,
.project-art.has-uploaded-thumbnail {
  background: #ececef !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 12px !important;
}

.product-preview.has-uploaded-thumbnail .product-badge,
.product-preview.has-uploaded-thumbnail .preview-link {
  z-index: 2;
}

.product-preview.has-uploaded-thumbnail:after,
.ref-project-stage.has-uploaded-thumbnail:after,
.project-art.has-uploaded-thumbnail:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(17,17,17,0.35));
  position: absolute;
  inset: 0;
  z-index: 1;
}

.ref-project-stage.has-uploaded-thumbnail .catalog-card-thumbnail,
.product-preview.has-uploaded-thumbnail .catalog-card-thumbnail,
.project-art.has-uploaded-thumbnail .project-list-thumbnail,
.project-art.has-uploaded-thumbnail .catalog-card-thumbnail,
.project-art.has-uploaded-thumbnail img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: top center !important;
  box-shadow: none !important;
}

.case-visual.has-uploaded-preview, .product-showcase.has-uploaded-preview {
  background: linear-gradient(145deg, #f3f3f5, #e3e3e7);
}

.case-visual.has-uploaded-preview .case-browser,
.product-showcase.has-uploaded-preview .large-product-window {
  overflow: hidden;
  background: #f7f7f8;
}

.case-browser > .catalog-main-preview,
.large-product-window > .catalog-main-preview {
  width: 100%;
  height: auto;
  max-height: min(72vh, 780px);
  display: block;
  object-fit: contain;
  object-position: top center;
  background: #f2f2f4;
}

.catalog-live-demo {
  min-height: 36px;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #fff !important;
  background: #ff5a1f !important;
  align-items: center;
  display: inline-flex !important;
  font-size: 9px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px #ff5a1f2b;
}

.catalog-live-demo:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 28px #ff5a1f3d;
}

.catalog-screenshot-section {
  padding: 92px 0;
  background: #f7f7f8;
  border-top: 1px solid #e7e7ea;
  border-bottom: 1px solid #e7e7ea;
}

.catalog-screenshot-section header {
  max-width: 720px;
  margin-bottom: 34px;
}

.catalog-screenshot-section header > span {
  color: #ff5a1f;
  text-transform: uppercase;
  letter-spacing: .14em;
  font: 800 9px/1 var(--font-code);
}

.catalog-screenshot-section h2 {
  margin: 13px 0 10px;
  letter-spacing: -.045em;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.03;
}

.catalog-screenshot-section header p {
  margin: 0;
  color: #73737a;
  font-size: 13px;
  line-height: 1.65;
}

.catalog-screenshot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.catalog-screenshot-grid a {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #ddddE2;
  border-radius: 12px;
  background: #fff;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.catalog-screenshot-grid a:hover {
  border-color: #ffb89a;
  transform: translateY(-5px);
  box-shadow: 0 22px 48px #1d1d2317;
}

.catalog-screenshot-grid img {
  width: 100%;
  aspect-ratio: 16/10;
  display: block;
  object-fit: cover;
  object-position: top center;
  background: #ececef;
}

.catalog-screenshot-grid a > span {
  padding: 13px 15px;
  color: #55555d;
  display: flex;
  justify-content: space-between;
  font: 800 9px/1 var(--font-code);
}

@media(max-width: 760px) {
  .project-art.has-uploaded-thumbnail {
    min-height: 280px;
    padding: 0 !important;
  }
  .project-list-thumbnail {
    max-height: none;
  }
  .case-browser > .catalog-main-preview,
  .large-product-window > .catalog-main-preview {
    max-height: 66vh;
  }
  .catalog-screenshot-section {
    padding: 62px 0;
  }
  .catalog-screenshot-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .catalog-screenshot-grid img {
    aspect-ratio: auto;
    max-height: 72vh;
  }
  .catalog-screenshot-section h2 {
    font-size: 36px;
  }
}

@media(max-width: 430px) {
  .project-art.has-uploaded-thumbnail {
    min-height: 230px;
  }
  .catalog-screenshot-section {
    padding: 50px 0;
  }
  .catalog-screenshot-section h2 {
    font-size: 31px;
  }
  .catalog-screenshot-grid a > span {
    font-size: 8px;
  }
}

/* ============================================================
   SPACING CORRECTIONS — reduce excessive hero padding
   ============================================================ */
.unified-public-page .page-hero { padding-top: 40px; padding-bottom: 40px; }
.unified-public-page .store-hero { padding: 40px 0; }
.unified-public-page .service-detail-hero { padding: 40px 0; }
.unified-public-page .case-hero { padding: 40px 0; }
.unified-public-page .legal-head { padding: 40px 0; }

/* Suppress the large "AB / STUDIO" watermark — it causes excessive visual space */
.unified-public-page .page-hero::after { display: none !important; }

/* Compact the hero-to-content gap */
.unified-public-page .page-hero + .section,
.unified-public-page .page-hero + section { margin-top: 0; }
.unified-public-page .section { padding-top: 56px; padding-bottom: 56px; }

/* Compact the first inner section right below the hero */
.unified-public-page > .site-header-wrap + .page-hero { padding-top: 36px; }

@media (max-width: 680px) {
  .unified-public-page .page-hero,
  .unified-public-page .store-hero,
  .unified-public-page .service-detail-hero,
  .unified-public-page .case-hero,
  .unified-public-page .legal-head { padding-top: 28px; padding-bottom: 28px; }
  .unified-public-page .page-hero h1,
  .unified-public-page .store-hero h1,
  .unified-public-page .service-detail-hero h1,
  .unified-public-page .case-hero h1,
  .unified-public-page .legal-head h1,
  .unified-public-page .commerce-hero h1,
  .unified-public-page .contact-page h1 { font-size: clamp(30px,8vw,44px); }
}

/* ============================================================
   PAGE-HERO V2 — compact two-column hero for static pages
   ============================================================ */
.page-hero-v2 {
  background:
    radial-gradient(circle at 80% 20%, #ff5a1f0e 0, #ff5a1f00 40%),
    linear-gradient(180deg, #fff8f4 0%, #fff 100%);
  border-bottom: 1px solid #f0e0d8;
  padding: 36px 0 40px;
  position: relative;
  overflow: hidden;
}
.page-hero-v2::before {
  content: '';
  opacity: .55;
  background-image:
    linear-gradient(#20202708 1px, transparent 1px),
    linear-gradient(90deg,#20202708 1px,transparent 1px);
  background-size: 56px 56px;
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-hero-v2 > * { position: relative; z-index: 1; }
.page-hero-v2-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.page-hero-v2-copy { flex: 1 1 0; min-width: 0; }
.page-hero-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--primary);
  font: 800 9px/1 var(--font-code);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.page-hero-v2-eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px;
  flex-shrink: 0;
}
.page-hero-v2-copy h1 {
  margin: 0 0 10px;
  color: #1e1e22;
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.05;
  letter-spacing: -.05em;
  text-wrap: balance;
  font-family: var(--font-display);
}
.page-hero-v2-copy h1 em {
  color: var(--primary);
  font-style: normal;
}
.page-hero-v2-copy > p {
  margin: 0;
  color: #6a6a72;
  font-size: 15px;
  line-height: 1.65;
  max-width: 520px;
}
.page-hero-v2-actions {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.ph2-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  font: 700 13px/1 var(--font-ui);
  white-space: nowrap;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 10px 24px #ff5a1f28;
}
.ph2-btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 16px 30px #ff5a1f38; }
.ph2-btn-primary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.ph2-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: transparent;
  color: #3a3a42;
  border: 1.5px solid #d8d8de;
  border-radius: 10px;
  font: 600 13px/1 var(--font-ui);
  white-space: nowrap;
  transition: color .2s, border-color .2s, transform .2s;
}
.ph2-btn-secondary:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-2px); }
.ph2-btn-secondary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (max-width: 900px) {
  .page-hero-v2-inner { flex-direction: column; align-items: flex-start; gap: 20px; }
  .page-hero-v2-actions { flex-direction: row; align-items: stretch; width: 100%; }
  .ph2-btn-primary { flex: 1; justify-content: center; }
  .ph2-btn-secondary { flex: 0 0 auto; justify-content: center; }
}
@media (max-width: 600px) {
  .page-hero-v2 { padding: 24px 0 28px; }
  .page-hero-v2-inner { padding: 0 18px; gap: 16px; }
  .page-hero-v2-copy h1 { font-size: clamp(28px, 8.5vw, 36px); }
  .page-hero-v2-copy > p { font-size: 14px; }
  .page-hero-v2-actions { flex-direction: column; }
  .ph2-btn-secondary { width: 100%; justify-content: center; }
}

/* ============================================================
   SERVICES PAGE — clean card grid
   ============================================================ */

/* Filter bar */
.svc-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
  /* Prevent horizontal overflow on the page */
  max-width: 100%;
}
.svc-filter-bar::-webkit-scrollbar { display: none; }
.svc-filter-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  min-height: 38px;
  background: #fff;
  border: 1.5px solid #dcdce2;
  border-radius: 999px;
  color: #57575e;
  font: 600 12px/1 var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s, background .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.svc-filter-btn:hover { color: var(--primary); border-color: #ffb799; transform: translateY(-1px); }
.svc-filter-btn.active,
.svc-filter-btn[aria-pressed="true"] {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 8px 20px #ff5a1f28;
}
.svc-filter-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Section heading row */
.svc-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.svc-section-head h2 {
  margin: 0;
  color: #1e1e22;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -.04em;
  line-height: 1.1;
  font-family: var(--font-display);
}

/* Card grid */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1099px) {
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .svc-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* Card */
.svc-card {
  background: #fff;
  border: 1.5px solid #e4e4e8;
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  position: relative;
  overflow: hidden;
}
.svc-card::before {
  content: '';
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #ff5a1f08, transparent 70%);
  border-radius: 50%;
  position: absolute;
  top: -40px;
  right: -30px;
  pointer-events: none;
}
.svc-card:hover {
  border-color: #ffb48a;
  box-shadow: 0 20px 48px #ff5a1f11;
  transform: translateY(-5px);
}
.svc-card[data-hidden] { display: none; }

/* Card icon */
.svc-card-icon {
  width: 52px;
  height: 52px;
  background: #fff4ef;
  border: 1px solid #ffdfd0;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--primary);
  margin-bottom: 18px;
  flex-shrink: 0;
  transition: background .25s, color .25s, transform .25s;
}
.svc-card:hover .svc-card-icon { background: var(--primary); color: #fff; transform: rotate(-4deg) scale(1.06); }
.svc-card-icon svg { width: 24px; height: 24px; stroke-width: 1.75; }

/* Card title */
.svc-card-title {
  margin: 0 0 8px;
  color: #1e1e22;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
  font-family: var(--font-display);
}

/* Card description */
.svc-card-desc {
  margin: 0 0 16px;
  color: #6a6a72;
  font-size: 13px;
  line-height: 1.65;
  flex: 1;
}

/* Feature chips */
.svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
.svc-chip {
  display: inline-block;
  padding: 5px 10px;
  background: #f5f5f7;
  border: 1px solid #e5e5ea;
  border-radius: 6px;
  color: #555560;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

/* Card link */
.svc-card-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #3a3a44;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1.5px solid #d4d4da;
  padding-bottom: 1px;
  margin-top: auto;
  transition: color .18s, border-color .18s;
  align-self: flex-start;
  min-height: 44px; /* touch target */
  align-items: center;
}
.svc-card-link:hover,
.svc-card-link:focus-visible { color: var(--primary); border-color: var(--primary); }
.svc-card-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; }

/* Services section wrapper */
.svc-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 28px 56px;
}
@media (max-width: 600px) {
  .svc-section { padding: 32px 18px 40px; }
  .svc-section-head { margin-bottom: 20px; }
  .svc-section-head h2 { font-size: clamp(20px, 6vw, 26px); }
  .svc-filter-bar { gap: 6px; }
  .svc-filter-btn { padding: 8px 14px; font-size: 11px; }
  .svc-card { padding: 20px; border-radius: 16px; }
  .svc-card-icon { width: 46px; height: 46px; margin-bottom: 14px; }
  .svc-card-title { font-size: 16px; }
}

/* Contact strip */
.svc-contact-strip {
  background: #fff8f4;
  border-top: 1px solid #f0ddd5;
  padding: 36px 28px;
  text-align: center;
}
.svc-contact-strip-inner {
  max-width: 560px;
  margin: 0 auto;
}
.svc-contact-strip p {
  margin: 0 0 8px;
  color: #6a6a72;
  font-size: 14px;
}
.svc-contact-strip h3 {
  margin: 0 0 20px;
  color: #1e1e22;
  font-size: clamp(18px, 2.5vw, 26px);
  font-family: var(--font-display);
  letter-spacing: -.03em;
}
.svc-contact-strip .ph2-btn-primary { margin: 0 auto; }
@media (max-width: 600px) {
  .svc-contact-strip { padding: 28px 18px; }
  .svc-contact-strip .ph2-btn-primary { width: 100%; justify-content: center; }
}

/* Page-hero-v2 inside the non-unified pages (standalone HTML) */
body:not(.unified-public-page-body) .page-hero-v2 {
  /* ensure correct font is loaded even on static pages */
  font-family: var(--font-ui);
}

/* ============================================================
   SERVICES page shell wrapper (for standalone static HTML)
   ============================================================ */
.svc-page-wrap { background: #fff; color: #232327; }

/* ============================================================
   HOMEPAGE PROCESS SECTION REDESIGN (Full-width 5-step Flow)
   ============================================================ */
.reference-home .ref-business-grid,
.ref-business-grid {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 48px 0 56px !important;
}

.reference-home .ref-process-card,
.ref-process-card {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  border: 1px solid #e9eaee !important;
  border-radius: 22px !important;
  padding: 44px 44px 50px !important;
  box-shadow: 0 10px 32px rgba(20, 20, 25, 0.04), 0 2px 8px rgba(20, 20, 25, 0.02) !important;
  box-sizing: border-box !important;
}

.reference-home .ref-process-card h2,
.ref-process-card h2 {
  font-family: var(--font-display, 'Space Grotesk', sans-serif) !important;
  font-size: clamp(22px, 2.5vw, 28px) !important;
  font-weight: 800 !important;
  color: #1e1e24 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.reference-home .ref-process-card h2::before,
.ref-process-card h2::before {
  content: '//' !important;
  font-family: var(--font-code, 'JetBrains Mono', monospace) !important;
  font-size: 19px !important;
  color: #ff5a1f !important;
  font-weight: 800 !important;
}

.reference-home .ref-process-list,
.ref-process-list {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  position: relative !important;
  margin-top: 10px !important;
  padding: 0 !important;
}

@keyframes processDashFlow {
  0% { stroke-dashoffset: 24; }
  100% { stroke-dashoffset: 0; }
}

@keyframes processArrowPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.2); opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 90, 31, 0.6)); }
}

.reference-home .ref-process-list,
.ref-process-list {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
  position: relative !important;
  margin-top: 14px !important;
  padding: 0 !important;
}

/* Remove any straight line crossing over text */
.reference-home .ref-process-list::before,
.ref-process-list::before {
  display: none !important;
}

.reference-home .ref-process-list article,
.ref-process-list article {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 6px !important;
  box-shadow: none !important;
}

/* Desktop Curved Dotted Arch Connector between Step Icons (Arching OVER the icons, never touching text) */
@media (min-width: 1081px) {
  .reference-home .ref-process-list article:not(:last-child)::before,
  .ref-process-list article:not(:last-child)::before {
    content: "" !important;
    position: absolute !important;
    top: -14px !important;
    left: 50% !important;
    width: 100% !important;
    height: 38px !important;
    border-top: 2px dashed #ff5a1f !important;
    border-right: 2px dashed #ff5a1f !important;
    border-top-right-radius: 26px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.85 !important;
    display: block !important;
  }

  /* Single Professional Arrowhead pointing DOWN into top of next step icon */
  .reference-home .ref-process-list article:not(:last-child)::after,
  .ref-process-list article:not(:last-child)::after {
    content: "" !important;
    position: absolute !important;
    top: 20px !important;
    left: 150% !important;
    margin-left: -5px !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-top: 8px solid #ff5a1f !important;
    z-index: 5 !important;
    animation: processArrowPulse 2s ease-in-out infinite !important;
    display: block !important;
  }
}

.reference-home .ref-process-list article .ref-process-icon-wrap,
.ref-process-list article .ref-process-icon-wrap,
.reference-home .ref-process-list article > i,
.ref-process-list article > i {
  position: relative !important;
  z-index: 2 !important;
  margin: 0 auto 16px !important;
}

.reference-home .ref-process-list article i,
.ref-process-list article i {
  width: 62px !important;
  height: 62px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1.5px solid #ff7038 !important;
  color: #ff5a1f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 0 7px #ffffff, 0 4px 18px rgba(255, 90, 31, 0.14) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

.reference-home .ref-process-list article i svg,
.ref-process-list article i svg {
  width: 23px !important;
  height: 23px !important;
  transition: transform 0.3s ease !important;
}

.reference-home .ref-process-list article:hover i,
.ref-process-list article:hover i {
  transform: translateY(-4px) scale(1.08) !important;
  background: #ff5a1f !important;
  border-color: #ff5a1f !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 7px #ffffff, 0 10px 26px rgba(255, 90, 31, 0.38) !important;
}

.reference-home .ref-process-list article:hover i svg,
.ref-process-list article:hover i svg {
  transform: scale(1.1) !important;
}

.reference-home .ref-process-list article span,
.ref-process-list article span {
  font-family: var(--font-code, 'JetBrains Mono', monospace) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #ff5a1f !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 6px !important;
  display: inline-block !important;
}

.reference-home .ref-process-list article h3,
.ref-process-list article h3 {
  font-family: var(--font-display, 'Space Grotesk', sans-serif) !important;
  font-size: 17px !important;
  font-weight: 750 !important;
  color: #1e1e24 !important;
  margin: 0 0 8px !important;
  letter-spacing: -0.015em !important;
}

.reference-home .ref-process-list article p,
.ref-process-list article p {
  font-size: 12.5px !important;
  color: #6a6a74 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 210px !important;
}

/* Responsive Tablet Adjustments */
@media (min-width: 681px) and (max-width: 1080px) {
  .reference-home .ref-process-card,
  .ref-process-card {
    padding: 36px 30px 42px !important;
  }
  .reference-home .ref-process-list,
  .ref-process-list {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 36px 18px !important;
  }
  .reference-home .ref-process-list article::before,
  .ref-process-list article::before,
  .reference-home .ref-process-list article::after,
  .ref-process-list article::after {
    display: none !important;
  }
}

/* Responsive Mobile Outer Curved Loops (Bypassing Text Completely) */
@media (max-width: 680px) {
  .reference-home .ref-process-card,
  .ref-process-card {
    padding: 28px 18px 34px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  .reference-home .ref-process-list,
  .ref-process-list {
    grid-template-columns: 1fr !important;
    gap: 44px !important;
    position: relative !important;
  }

  .reference-home .ref-process-list article,
  .ref-process-list article {
    padding: 0 !important;
    position: relative !important;
  }

  /* Reset default pseudo-elements on mobile so no duplicate arrowheads appear */
  .reference-home .ref-process-list article::before,
  .ref-process-list article::before,
  .reference-home .ref-process-list article::after,
  .ref-process-list article::after {
    display: none !important;
  }

  /* Step 1 & 3: Outer RIGHT Curved Dotted Arch around text box */
  .reference-home .ref-process-list article:nth-child(1)::before,
  .ref-process-list article:nth-child(1)::before,
  .reference-home .ref-process-list article:nth-child(3)::before,
  .ref-process-list article:nth-child(3)::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: 31px !important;
    right: 8px !important;
    width: 45px !important;
    bottom: -32px !important;
    height: auto !important;
    left: auto !important;
    border: 2px dashed #ff5a1f !important;
    border-left: none !important;
    border-radius: 0 28px 28px 0 !important;
    z-index: 0 !important;
    opacity: 0.75 !important;
    pointer-events: none !important;
  }

  /* Step 1 & 3: Single Arrowhead at bottom right curve pointing back toward step center */
  .reference-home .ref-process-list article:nth-child(1)::after,
  .ref-process-list article:nth-child(1)::after,
  .reference-home .ref-process-list article:nth-child(3)::after,
  .ref-process-list article:nth-child(3)::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    bottom: -36px !important;
    right: 36px !important;
    top: auto !important;
    left: auto !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 5px solid transparent !important;
    border-bottom: 5px solid transparent !important;
    border-right: 8px solid #ff5a1f !important;
    z-index: 5 !important;
    transform: rotate(180deg) !important;
    animation: processArrowPulse 2s ease-in-out infinite !important;
  }

  /* Step 2 & 4: Outer LEFT Curved Dotted Arch around text box */
  .reference-home .ref-process-list article:nth-child(2)::before,
  .ref-process-list article:nth-child(2)::before,
  .reference-home .ref-process-list article:nth-child(4)::before,
  .ref-process-list article:nth-child(4)::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: 31px !important;
    left: 8px !important;
    width: 45px !important;
    bottom: -32px !important;
    height: auto !important;
    right: auto !important;
    border: 2px dashed #ff5a1f !important;
    border-right: none !important;
    border-radius: 28px 0 0 28px !important;
    z-index: 0 !important;
    opacity: 0.75 !important;
    pointer-events: none !important;
  }

  /* Step 2 & 4: Single Arrowhead at bottom left curve pointing back toward step center */
  .reference-home .ref-process-list article:nth-child(2)::after,
  .ref-process-list article:nth-child(2)::after,
  .reference-home .ref-process-list article:nth-child(4)::after,
  .ref-process-list article:nth-child(4)::after {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    bottom: -36px !important;
    left: 36px !important;
    top: auto !important;
    right: auto !important;
    width: 0 !important;
    height: 0 !important;
    border-top: 5px solid transparent !important;
    border-bottom: 5px solid transparent !important;
    border-left: 8px solid #ff5a1f !important;
    z-index: 5 !important;
    transform: rotate(0deg) !important;
    animation: processArrowPulse 2s ease-in-out infinite !important;
  }
}

/* UI Cleanup — Compact Visual Density & Clean Spacing Overrides for Public UI */
.unified-public-page .page-hero,
.unified-public-page .store-hero,
.unified-public-page .service-detail-hero,
.unified-public-page .case-hero,
.unified-public-page .legal-head {
  padding-top: 54px !important;
  padding-bottom: 48px !important;
}

.unified-public-page .section,
.unified-public-page .store-section,
.unified-public-page .insights-section,
.unified-public-page .contact-section,
.unified-public-page .page-cta,
.unified-public-page .values-section {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.unified-public-page .page-hero h1,
.unified-public-page .store-hero h1,
.unified-public-page .service-detail-hero h1,
.unified-public-page .case-hero h1,
.unified-public-page .legal-head h1 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.cart-modal-shell,
.checkout-card {
  padding: 18px !important;
}

.checkout-form label {
  gap: 6px !important;
  margin-bottom: 10px !important;
}

.checkout-form input,
.checkout-form select,
.checkout-form textarea {
  min-height: 40px !important;
  padding: 9px 12px !important;
}

/* Professional Coding & Development Platform UI Polish */
.ref-section-head h2,
.section h2,
.unified-public-page h2 {
  font-family: var(--font-display);
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  color: #1a1a1e !important;
}

.ref-section-head p,
.section p,
.unified-public-page p {
  color: #606068 !important;
  line-height: 1.6 !important;
  font-size: 13.5px !important;
}

.ref-kicker,
.eyebrow,
.cms-top-label {
  font-family: var(--font-code) !important;
  letter-spacing: 0.1em !important;
  font-weight: 750 !important;
}

/* Icon Alignment & Tech Card Consistency */
.service-icon,
.tech-icon,
.feature-icon,
.panel-kpi > i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Clean Section Container Spacing */
.shell,
.container,
.cms-content {
  width: min(1280px, 92vw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ----------------------------------------------------
   HOMEPAGE SERVICES GRID (4 TOP, 3 CENTERED BOTTOM, NO OUTER BOX)
   ---------------------------------------------------- */
.ref-services {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 36px !important;
  margin-bottom: 40px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 18px !important;
  width: min(1280px, 92vw) !important;
}

.ref-services > a {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.ref-services > a:hover {
  transform: translateY(-4px) !important;
  border-color: #ff5a1f !important;
  box-shadow: 0 10px 24px rgba(255, 90, 31, 0.12) !important;
  background: #ffffff !important;
}

.ref-services > a > i {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: #fff1eb !important;
  color: #ff5a1f !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
  box-shadow: inset 0 0 0 1px rgba(255, 90, 31, 0.1) !important;
}

.ref-services > a:hover > i {
  background: #ff5a1f !important;
  color: #ffffff !important;
  transform: scale(1.05) rotate(-3deg) !important;
}

.ref-services > a > span {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  flex: 1 !important;
}

.ref-services strong {
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1a1a1e !important;
  letter-spacing: -0.01em !important;
}

.ref-services small {
  font-size: 11px !important;
  color: #606068 !important;
  line-height: 1.4 !important;
  max-width: 100% !important;
  font-weight: 400 !important;
}

.service-arrow {
  color: #a0a0a6 !important;
  transition: transform 0.25s ease, color 0.25s ease !important;
  flex-shrink: 0 !important;
}

.ref-services > a:hover .service-arrow {
  color: #ff5a1f !important;
  transform: translate(2px, -2px) !important;
}

/* Desktop Grid: 4 cards on row 1, 3 cards centered on row 2 */
@media (min-width: 992px) {
  .ref-services > a {
    flex: 0 0 calc(25% - 14px) !important;
    max-width: calc(25% - 14px) !important;
    min-height: 88px !important;
  }
}

/* Tablet Grid: 3 cards per row */
@media (min-width: 768px) and (max-width: 991px) {
  .ref-services > a {
    flex: 0 0 calc(33.333% - 12px) !important;
    max-width: calc(33.333% - 12px) !important;
    min-height: 84px !important;
  }
}

/* Mobile Grid: 1 card per row */
@media (max-width: 767px) {
  .ref-services {
    gap: 12px !important;
  }
  .ref-services > a {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    min-height: 74px !important;
    padding: 14px 16px !important;
  }
}

/* ----------------------------------------------------
   ABOUT PAGE & CEO ASHOK KUMAR SPOTLIGHT STYLES
   ---------------------------------------------------- */
.about-hero-section {
  padding: 75px 0 60px !important;
  background: linear-gradient(180deg, #fcfcfd 0%, #ffffff 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  border-bottom: 1px solid #f0f0f3 !important;
}

.about-hero-grid {
  display: grid !important;
  grid-template-columns: 1.15fr 0.85fr !important;
  gap: 50px !important;
  align-items: center !important;
}

.hero-kicker {
  font-family: var(--font-code) !important;
  color: #ff5a1f !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  margin-bottom: 16px !important;
}

.about-hero-copy h1 {
  font-family: var(--font-display) !important;
  font-size: clamp(36px, 4.2vw, 62px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  color: #111827 !important;
  letter-spacing: -0.03em !important;
  margin-bottom: 20px !important;
}

.about-hero-copy h1 strong {
  color: #ff5a1f !important;
}

.about-hero-copy p {
  font-size: 15.5px !important;
  line-height: 1.65 !important;
  color: #4b5563 !important;
  margin-bottom: 24px !important;
}

.about-hero-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 30px !important;
}

.tech-pill {
  font-family: var(--font-code) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #ff5a1f !important;
  background: #fff1eb !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 90, 31, 0.15) !important;
}

.about-hero-cta {
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
}

.about-logo-card {
  position: relative !important;
  display: flex !important;
  justify-content: center !important;
}

.logo-glow {
  position: absolute !important;
  width: 280px !important;
  height: 280px !important;
  background: radial-gradient(circle, rgba(255, 90, 31, 0.18) 0%, rgba(255,255,255,0) 70%) !important;
  border-radius: 50% !important;
  filter: blur(20px) !important;
}

.logo-card-inner {
  position: relative !important;
  z-index: 2 !important;
  background: #ffffff !important;
  border: 1px solid #dedee3 !important;
  border-radius: 20px !important;
  padding: 38px 34px !important;
  text-align: center !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06) !important;
  max-width: 380px !important;
  width: 100% !important;
}

.about-hero-logo {
  max-width: 140px !important;
  height: auto !important;
  margin: 0 auto 18px !important;
  display: block !important;
}

.brand-subtext strong {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  letter-spacing: -0.02em !important;
}

.brand-subtext small {
  display: block !important;
  font-size: 12px !important;
  color: #ff5a1f !important;
  font-weight: 700 !important;
  margin-top: 4px !important;
}

.logo-code-tag {
  margin-top: 22px !important;
  background: #18181b !important;
  color: #a1a1aa !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 10.5px !important;
  font-family: var(--font-code) !important;
}

.logo-code-tag code {
  color: #38bdf8 !important;
}

/* CEO & FOUNDER LEADERSHIP SECTION */
.ceo-leadership-section {
  padding: 85px 0 !important;
  background: #ffffff !important;
}

.ceo-card-container {
  background: linear-gradient(135deg, #111115 0%, #1a1a22 100%) !important;
  border: 1px solid #2a2a34 !important;
  border-radius: 24px !important;
  padding: 48px 52px !important;
  color: #ffffff !important;
  position: relative !important;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden !important;
}

.ceo-badge-tag {
  position: absolute !important;
  top: 25px !important;
  right: 35px !important;
  font-family: var(--font-code) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  color: #ff5a1f !important;
  background: rgba(255, 90, 31, 0.12) !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 90, 31, 0.25) !important;
}

.ceo-card-grid {
  display: grid !important;
  grid-template-columns: 0.75fr 1.25fr !important;
  gap: 45px !important;
  align-items: center !important;
}

.ceo-portrait-frame {
  position: relative !important;
}

.ceo-avatar-placeholder {
  width: 130px !important;
  height: 130px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ff5a1f 0%, #c93800 100%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-shadow: 0 14px 35px rgba(255, 90, 31, 0.35) !important;
  border: 4px solid #2a2a34 !important;
}

.ceo-initials {
  font-family: var(--font-display) !important;
  font-size: 46px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: -0.03em !important;
}

.ceo-avatar-badge {
  position: absolute !important;
  bottom: -6px !important;
  background: #10b981 !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 3px 9px !important;
  border-radius: 12px !important;
  border: 2px solid #111115 !important;
  letter-spacing: 0.05em !important;
}

.ceo-meta-details {
  margin-top: 18px !important;
}

.ceo-meta-details h3 {
  font-family: var(--font-display) !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin-bottom: 4px !important;
}

.ceo-title {
  color: #ff7540 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin-bottom: 16px !important;
}

.ceo-specs {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.ceo-specs span {
  font-size: 12px !important;
  color: #a1a1aa !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ceo-quote-mark {
  font-family: Georgia, serif !important;
  font-size: 65px !important;
  line-height: 0.8 !important;
  color: #ff5a1f !important;
  margin-bottom: 8px !important;
}

.ceo-statement {
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: #f4f4f5 !important;
  font-weight: 600 !important;
  margin: 0 0 16px 0 !important;
  letter-spacing: -0.01em !important;
}

.ceo-bio-text {
  font-size: 13.5px !important;
  line-height: 1.65 !important;
  color: #a1a1aa !important;
  margin-bottom: 26px !important;
}

.ceo-actions {
  display: flex !important;
  gap: 12px !important;
  align-items: center !important;
}

/* ABOUT STATS STRIP */
.about-stats-section {
  padding: 42px 0 !important;
  background: #fafafa !important;
  border-top: 1px solid #ececee !important;
  border-bottom: 1px solid #ececee !important;
}

.about-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  text-align: center !important;
}

.stat-card strong {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: 34px !important;
  font-weight: 800 !important;
  color: #ff5a1f !important;
  letter-spacing: -0.03em !important;
}

.stat-card p {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #18181b !important;
  margin: 4px 0 2px 0 !important;
}

.stat-card small {
  font-size: 11px !important;
  color: #71717a !important;
}

/* ABOUT VALUES SECTION */
.about-values-section {
  padding: 85px 0 !important;
  background: #ffffff !important;
}

.values-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  margin-top: 36px !important;
}

.value-item {
  background: #fcfcfd !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 28px 22px !important;
  transition: all 0.25s ease !important;
}

.value-item:hover {
  transform: translateY(-4px) !important;
  border-color: #ff5a1f !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.05) !important;
}

.value-num {
  font-family: var(--font-code) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  color: #ff5a1f !important;
  background: #fff1eb !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  margin-bottom: 16px !important;
}

.value-item h3 {
  font-family: var(--font-display) !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em !important;
}

.value-item p {
  font-size: 12.5px !important;
  color: #6b7280 !important;
  line-height: 1.55 !important;
}

/* RESPONSIVE ABOUT PAGE */
@media (max-width: 991px) {
  .about-hero-grid,
  .ceo-card-grid {
    grid-template-columns: 1fr !important;
    gap: 35px !important;
  }
  .ceo-badge-tag {
    position: static !important;
    display: inline-block !important;
    margin-bottom: 20px !important;
  }
  .about-stats-grid,
  .values-card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .ceo-card-container {
    padding: 30px 22px !important;
  }
  .about-stats-grid,
  .values-card-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ----------------------------------------------------
   CEO EMAIL BUTTON & CONTACT PAGE STYLES
   ---------------------------------------------------- */
.ceo-email-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  border: 1px solid #ffffff !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ceo-email-btn:hover {
  background: #f4f4f5 !important;
  color: #ff5a1f !important;
  transform: translateY(-2px) !important;
  border-color: #ff5a1f !important;
  box-shadow: 0 8px 20px rgba(255, 90, 31, 0.2) !important;
}

.ceo-email-btn i {
  color: #ff5a1f !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ====================================================
   NEW CLEAN CONTACT PAGE STYLES (NO CONFLICTS)
   ==================================================== */
.ab-contact-section {
  background: #f8fafc !important;
  color: #0f172a !important;
  padding: 70px 0 85px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.ab-contact-grid {
  display: grid !important;
  grid-template-columns: 44% 56% !important;
  gap: 55px !important;
  align-items: start !important;
}

.ab-contact-left {
  display: flex !important;
  flex-direction: column !important;
}

.ab-contact-eyebrow {
  font-family: var(--font-code) !important;
  color: #ff5a1f !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.15em !important;
  margin-bottom: 14px !important;
}

.ab-contact-title {
  font-family: var(--font-display) !important;
  font-size: clamp(36px, 4vw, 54px) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  color: #0f172a !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 18px 0 !important;
}

.highlight-orange {
  color: #ff5a1f !important;
}

.ab-contact-sub {
  font-size: 15px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  margin: 0 0 30px 0 !important;
}

.ab-contact-channels {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

.ab-channel-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.25s ease !important;
}

.ab-channel-card:hover {
  transform: translateY(-2px) !important;
  border-color: #ff5a1f !important;
  box-shadow: 0 10px 24px rgba(255, 90, 31, 0.12) !important;
}

.ab-wa-card:hover {
  border-color: #25d366 !important;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.15) !important;
}

.ab-channel-icon {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  background: #fff1eb !important;
  color: #ff5a1f !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
}

.ab-wa-card .ab-channel-icon {
  background: #e8f9ee !important;
  color: #10b981 !important;
}

.ab-loc-card .ab-channel-icon {
  background: #f0f9ff !important;
  color: #0284c7 !important;
}

.ab-channel-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
}

.ab-channel-info small {
  font-size: 11px !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
}

.ab-channel-info strong {
  font-family: var(--font-display) !important;
  font-size: 14.5px !important;
  color: #0f172a !important;
  font-weight: 700 !important;
}

.ab-channel-arr {
  color: #94a3b8 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}

.ab-channel-card:hover .ab-channel-arr {
  color: #ff5a1f !important;
}

.ab-trust-banner {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

.ab-trust-icon {
  font-size: 22px !important;
}

.ab-trust-banner strong {
  display: block !important;
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  color: #0f172a !important;
  margin-bottom: 2px !important;
}

.ab-trust-banner p {
  font-size: 12px !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

/* FORM WRAPPER CARD */
.ab-form-wrapper {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 20px !important;
  padding: 36px 38px !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.06) !important;
}

.ab-form-head h2 {
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 0 4px 0 !important;
  letter-spacing: -0.02em !important;
}

.ab-form-head p {
  font-size: 13px !important;
  color: #64748b !important;
  margin: 0 0 24px 0 !important;
  line-height: 1.5 !important;
}

.ab-brief-form {
  display: flex !important;
  flex-direction: column !important;
}

.ab-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px !important;
  margin-bottom: 16px !important;
}

.ab-form-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
}

.ab-form-field.full-width {
  margin-bottom: 20px !important;
}

.ab-form-field label {
  font-family: var(--font-ui) !important;
  font-size: 11.5px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  color: #334155 !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.ab-form-field label .req {
  color: #ff5a1f !important;
}

.ab-form-field input,
.ab-form-field select,
.ab-form-field textarea {
  width: 100% !important;
  font-family: var(--font-ui) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 11px 14px !important;
  outline: none !important;
  margin: 0 !important;
  text-transform: none !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.ab-form-field input:focus,
.ab-form-field select:focus,
.ab-form-field textarea:focus {
  border-color: #ff5a1f !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.15) !important;
}

.ab-submit-btn {
  width: 100% !important;
  min-height: 50px !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  border-radius: 8px !important;
  background: #ff5a1f !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 14px 28px rgba(255, 90, 31, 0.25) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.25s ease !important;
}

.ab-submit-btn:hover {
  transform: translateY(-2px) !important;
  background: #e04810 !important;
  box-shadow: 0 18px 36px rgba(255, 90, 31, 0.35) !important;
}

.ab-privacy-text {
  font-size: 11.5px !important;
  color: #64748b !important;
  text-align: center !important;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}

/* DETAILS STRIP */
.ab-details-strip {
  padding: 55px 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.ab-details-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
}

.ab-detail-box {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 26px 22px !important;
}

.ab-detail-badge {
  font-family: var(--font-code) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #ff5a1f !important;
  background: #fff1eb !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  display: inline-block !important;
  margin-bottom: 12px !important;
}

.ab-detail-box h4 {
  font-family: var(--font-display) !important;
  font-size: 16.5px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  margin: 0 0 6px 0 !important;
}

.ab-detail-box p {
  font-size: 12.5px !important;
  color: #64748b !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* RESPONSIVE */
@media (max-width: 991px) {
  .ab-contact-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .ab-details-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .ab-form-wrapper {
    padding: 26px 22px !important;
  }
}

@media (max-width: 600px) {
  .ab-form-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}

/* ==========================================================================
   WHAT OUR CLIENTS SAY — CONTINUOUS AUTO SCROLL MARQUEE CAROUSEL
   ========================================================================== */
.reference-home .ref-reviews {
  position: relative !important;
  overflow: hidden !important;
  margin-top: 10px !important;
  margin-bottom: 24px !important;
}

.reference-home .ref-section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 20px !important;
}

.reference-home .ref-review-arrows {
  display: flex !important;
  gap: 10px !important;
}

.reference-home .ref-review-arrows button {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  background: #ffffff !important;
  color: #1e293b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.22s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
}

.reference-home .ref-review-arrows button:hover {
  background: var(--primary, #ff5a1f) !important;
  color: #ffffff !important;
  border-color: var(--primary, #ff5a1f) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(255, 90, 31, 0.25) !important;
}

.reference-home .ref-review-track-wrapper {
  width: 100% !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 8px 4px 20px 4px !important;
  scroll-behavior: smooth !important;
  mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%) !important;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%) !important;
}

.reference-home .ref-review-track-wrapper::-webkit-scrollbar {
  display: none !important;
}

.reference-home .ref-review-track {
  display: flex !important;
  gap: 22px !important;
  width: max-content !important;
  padding-right: 20px !important;
  animation: continuousMarquee 38s linear infinite !important;
}

.reference-home .ref-review-track-wrapper:hover .ref-review-track {
  animation-play-state: paused !important;
}

@keyframes continuousMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.reference-home .ref-review-card {
  flex: 0 0 350px !important;
  width: 350px !important;
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 18px !important;
  padding: 24px 26px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.reference-home .ref-review-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 30px rgba(255, 90, 31, 0.12) !important;
  border-color: rgba(255, 90, 31, 0.35) !important;
}

.reference-home .ref-review-card b {
  color: #fbbf24 !important;
  font-size: 16px !important;
  letter-spacing: 3px !important;
  margin-bottom: 14px !important;
  display: block !important;
}

.reference-home .ref-review-card p {
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: #334155 !important;
  margin: 0 0 20px 0 !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

.reference-home .ref-review-card div {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: auto !important;
  padding-top: 14px !important;
  border-top: 1px solid #f1f5f9 !important;
}

.reference-home .ref-review-card div i {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #ff5a1f, #ff8a00) !important;
  color: #ffffff !important;
  font-weight: 750 !important;
  font-size: 13px !important;
  font-style: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 12px rgba(255, 90, 31, 0.22) !important;
}

.reference-home .ref-review-card div span {
  display: flex !important;
  flex-direction: column !important;
}

.reference-home .ref-review-card div span strong {
  font-size: 14.5px !important;
  font-weight: 750 !important;
  color: #0f172a !important;
}

.reference-home .ref-review-card div span small {
  font-size: 12.5px !important;
  color: #64748b !important;
}

/* ==========================================================================
   FULL-WIDTH STACKED LAYOUT FOR REVIEWS & CTA CARDS
   ========================================================================== */
.reference-home .ref-lower-grid {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 30px !important;
  width: 100% !important;
  margin-top: 36px !important;
  margin-bottom: 24px !important;
}

.reference-home .ref-reviews {
  width: 100% !important;
  margin: 0 !important;
  padding: 28px 32px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.03) !important;
}

.reference-home .ref-reviews .ref-section-head h2 {
  font-family: var(--font-display) !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin: 0 !important;
}

.reference-home .ref-cta-card {
  width: 100% !important;
  min-height: 170px !important;
  padding: 34px 44px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  position: relative !important;
  overflow: hidden !important;
}

.reference-home .ref-cta-card > div {
  z-index: 2 !important;
  position: relative !important;
  max-width: 650px !important;
}

.reference-home .ref-cta-card h2 {
  font-family: var(--font-display) !important;
  font-size: 27px !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 8px 0 !important;
}

.reference-home .ref-cta-card p {
  font-size: 14.5px !important;
  color: #64748b !important;
  margin: 0 0 22px 0 !important;
  font-weight: 500 !important;
}

.reference-home .ref-cta-card a {
  color: #ffffff !important;
  background: linear-gradient(115deg, #ff5a1f, #e04810) !important;
  border-radius: 999px !important;
  align-items: center !important;
  gap: 16px !important;
  min-height: 48px !important;
  padding: 8px 10px 8px 24px !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  display: inline-flex !important;
  box-shadow: 0 12px 28px rgba(255, 90, 31, 0.28) !important;
  transition: all 0.25s ease !important;
}

.reference-home .ref-cta-card a:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 36px rgba(255, 90, 31, 0.38) !important;
}

.reference-home .ref-cta-card a span {
  color: #111111 !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
}

.reference-home .ref-cta-card > i,
.reference-home .ref-cta-card > b,
.reference-home .ref-cta-card > em {
  border-radius: 26px !important;
  position: absolute !important;
  right: -30px !important;
  transform: rotate(38deg) !important;
  opacity: 0.95 !important;
}

.reference-home .ref-cta-card > i {
  background: #ff7440 !important;
  width: 110px !important;
  height: 360px !important;
  top: -120px !important;
  right: 35px !important;
}

.reference-home .ref-cta-card > b {
  background: #ff5a1f !important;
  width: 95px !important;
  height: 320px !important;
  top: -70px !important;
  right: -10px !important;
}

.reference-home .ref-cta-card > em {
  background: #d8430d !important;
  width: 75px !important;
  height: 280px !important;
  top: 20px !important;
  right: -45px !important;
}

@media (max-width: 768px) {
  .reference-home .ref-reviews {
    padding: 20px 18px !important;
  }
  .reference-home .ref-cta-card {
    padding: 26px 20px !important;
  }
  .reference-home .ref-cta-card h2 {
    font-size: 22px !important;
  }
  .reference-home .ref-cta-card p {
    font-size: 13px !important;
  }
  .reference-home .ref-cta-card a {
    min-height: 44px !important;
    padding: 6px 8px 6px 18px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 640px) {
  .reference-home .ref-review-card,
  .ref-review-card {
    flex: 0 0 270px !important;
    width: 270px !important;
    max-width: calc(100vw - 44px) !important;
    padding: 16px 18px !important;
    border-radius: 14px !important;
  }
  .reference-home .ref-review-card p,
  .ref-review-card p {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 12px !important;
  }
  .reference-home .ref-review-card b,
  .ref-review-card b {
    font-size: 13px !important;
    margin-bottom: 8px !important;
  }
  .reference-home .ref-review-card div,
  .ref-review-card div {
    padding-top: 10px !important;
    gap: 10px !important;
  }
  .reference-home .ref-review-card div i,
  .ref-review-card div i {
    width: 36px !important;
    height: 36px !important;
    font-size: 11px !important;
  }
  .reference-home .ref-review-card div span strong,
  .ref-review-card div span strong {
    font-size: 13px !important;
  }
  .reference-home .ref-review-card div span small,
  .ref-review-card div span small {
    font-size: 11px !important;
  }
}

/* ==========================================================================
   SERVICE PAGES HERO REDESIGN — COMPACT, SLEEK, ELEGANT & PROFESSIONAL
   ========================================================================== */
.unified-public-page .service-detail-hero,
.service-detail-hero,
.service-plans-hero,
.unified-public-page .service-plans-hero,
.unified-public-page .page-hero-v2,
.page-hero-v2 {
  background: #ffffff !important;
  background-image: none !important;
  border-bottom: 1px solid #f0f0f4 !important;
  color: #1a1a22 !important;
  padding: 16px 0 14px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

.unified-public-page .service-detail-hero > .shell,
.service-detail-hero > .shell,
.service-plans-hero > .shell,
.unified-public-page .service-plans-hero > .shell,
.page-hero-v2-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  grid-template-columns: 1fr !important;
  min-height: 0 !important;
  max-width: 100% !important;
}

.service-detail-hero > .shell > div:first-child,
.service-plans-hero > .shell > div:first-child {
  width: 100% !important;
}

/* Completely remove the giant orbit circle graphic */
.service-orbit {
  display: none !important;
}

/* Sleek Back Link */
.service-detail-hero a:first-child,
.service-detail-hero .shell > div > a:first-child,
.service-plans-hero a:first-child,
.service-plans-hero .shell > div > a:first-child {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.2s ease !important;
}

.service-detail-hero a:first-child:hover,
.service-plans-hero a:first-child:hover {
  color: var(--primary, #ff5a1f) !important;
}

/* Eyebrow */
.service-detail-hero .eyebrow,
.service-plans-hero .eyebrow,
.page-hero-v2-eyebrow {
  margin-bottom: 4px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--primary, #ff5a1f) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.service-detail-hero .eyebrow span,
.service-plans-hero .eyebrow span {
  background: var(--primary, #ff5a1f) !important;
  width: 20px !important;
  height: 2px !important;
}

/* Hero Title H1 */
.service-detail-hero h1,
.service-plans-hero h1,
.unified-public-page .service-detail-hero h1,
.unified-public-page .service-plans-hero h1,
.page-hero-v2 h1 {
  font-size: clamp(20px, 3.2vw, 36px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.15 !important;
  margin: 4px 0 6px 0 !important;
  color: #111118 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.service-detail-hero h1 br,
.service-plans-hero h1 br,
.page-hero-v2 h1 br {
  display: none !important;
}

.service-detail-hero h1 em,
.service-plans-hero h1 em,
.page-hero-v2 h1 em {
  color: var(--primary, #ff5a1f) !important;
  font-style: normal !important;
}

/* Subhead Paragraph */
.service-detail-hero p,
.service-plans-hero p,
.unified-public-page .service-detail-hero p,
.unified-public-page .service-plans-hero p,
.page-hero-v2 p {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #52525c !important;
  max-width: 720px !important;
  margin: 0 !important;
}

/* Action Buttons */
.service-detail-hero .button,
.service-detail-hero a.button,
.service-plans-hero .button,
.service-plans-hero a.button,
.page-hero-v2-actions {
  display: none !important;
}
/* ============================================================
   PROJECTS & SINGLE PROJECT CASE STUDY STYLING V2
   ============================================================ */

/* Headings */
.projects-single-line-heading,
.single-project-heading {
  font-family: var(--font-display, "Space Grotesk", sans-serif) !important;
  font-size: clamp(26px, 3.8vw, 44px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.2 !important;
  margin: 10px 0 16px 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
}

.projects-single-line-heading em,
.single-project-heading em {
  color: var(--red, #ff5a1f) !important;
  font-style: normal !important;
}

.projects-grid-heading {
  white-space: normal !important;
  font-size: clamp(22px, 3vw, 36px) !important;
  line-height: 1.25 !important;
}

/* Projects Grid View - Structured 2-column layout */
.projects-showcase-section {
  padding-top: 10px !important;
  padding-bottom: 60px !important;
}

.projects-grid-view {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 32px !important;
  margin-top: 10px !important;
  margin-bottom: 50px !important;
  align-items: stretch !important;
}

.projects-showcase-section .project-card,
.projects-showcase-section .project-card-v2,
.project-card-v2 {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #ffffff !important;
  border: 1px solid #e2e2e8 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.project-card-v2:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 20px 48px rgba(21, 21, 30, 0.12) !important;
  border-color: #ffd0bb !important;
}

.project-thumb-box {
  position: relative !important;
  width: 100% !important;
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
  flex: 0 0 240px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f4f4f7 !important;
  text-decoration: none !important;
}

.project-thumb-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  transition: transform 0.35s ease !important;
}

.project-card-v2:hover .project-thumb-img {
  transform: scale(1.04) !important;
}

.project-window-mini {
  width: 84% !important;
  height: 78% !important;
  background: #111116 !important;
  border: 3px solid #282830 !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35) !important;
  transform: perspective(600px) rotateX(3deg) !important;
  transition: transform 0.3s ease !important;
}

.project-card-v2:hover .project-window-mini {
  transform: perspective(600px) rotateX(0deg) scale(1.02) !important;
}

.project-window-mini .window-bar {
  height: 20px !important;
  background: #1a1a20 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 8px !important;
}

.project-window-mini .window-bar i {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #666 !important;
}

.project-window-mini .window-bar span {
  color: #888892 !important;
  font-size: 7px !important;
  font-family: var(--font-code, monospace) !important;
  margin-left: auto !important;
}

.window-body-mini {
  height: calc(100% - 20px) !important;
  padding: 8px !important;
  background: #16161c !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.mini-kpis {
  display: flex !important;
  gap: 4px !important;
  height: 24% !important;
}

.mini-kpis i {
  flex: 1 !important;
  background: #252530 !important;
  border-radius: 3px !important;
}

.mini-chart {
  height: 35% !important;
  background: linear-gradient(135deg, rgba(255, 90, 31, 0.2), rgba(255, 112, 64, 0.08)) !important;
  border-radius: 3px !important;
}

.mini-rows {
  display: grid !important;
  gap: 3px !important;
}

.mini-rows i {
  height: 4px !important;
  background: #282834 !important;
  border-radius: 2px !important;
}

.project-pill-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  z-index: 3 !important;
  background: rgba(17, 17, 22, 0.88) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: #ffffff !important;
  padding: 5px 11px !important;
  border-radius: 6px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

.project-metric-pill {
  position: absolute !important;
  bottom: 14px !important;
  right: 14px !important;
  z-index: 3 !important;
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: var(--red, #ff5a1f) !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
}

.projects-showcase-section .project-copy,
.project-card-body {
  padding: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  background: #ffffff !important;
}

.project-card-body h3 {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.3 !important;
}

.project-card-body h3 a {
  color: #1a1a20 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.project-card-body h3 a:hover {
  color: var(--red, #ff5a1f) !important;
}

.project-card-body p {
  margin: 0 !important;
  color: #64646e !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.project-tags-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

.project-tech-tag {
  background: #f2f2f5 !important;
  color: #52525a !important;
  padding: 4px 9px !important;
  border-radius: 5px !important;
  font-size: 10px !important;
  font-weight: 750 !important;
}

.project-case-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  color: var(--red, #ff5a1f) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: gap 0.2s ease !important;
}

.project-card-v2:hover .project-case-btn {
  gap: 11px !important;
}

/* Single Project Detail Styling */
.single-project-hero {
  padding: 38px 0 30px !important;
  background: linear-gradient(180deg, #fff9f6 0%, #ffffff 100%) !important;
  border-bottom: 1px solid #f0e6e2 !important;
}

.single-project-topnav {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 12px !important;
}

.single-project-back {
  color: #777780 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.single-project-back:hover {
  color: var(--red, #ff5a1f) !important;
}

.single-project-cat {
  background: #fff0ea !important;
  color: var(--red, #ff5a1f) !important;
  border: 1px solid #ffd5c4 !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

.single-project-sub {
  color: #666670 !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  max-width: 780px !important;
  margin: 0 0 20px 0 !important;
}

.single-project-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.single-project-tech-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.single-project-tech-pill {
  background: #f0f0f3 !important;
  color: #44444c !important;
  padding: 5px 12px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
}

.single-project-demo-btn {
  background: var(--red, #ff5a1f) !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  box-shadow: 0 8px 20px rgba(255, 90, 31, 0.17) !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, background 0.2s ease !important;
}

.single-project-demo-btn:hover {
  background: var(--primary-dark, #d8430d) !important;
  transform: translateY(-2px) !important;
}

.single-project-preview-wrap {
  padding: 35px 0 50px !important;
}

.single-project-window {
  background: #111116 !important;
  border: 1px solid #282830 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25) !important;
}

.single-project-window .window-bar {
  background: #1c1c22 !important;
  padding: 12px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.dot-red { width: 10px; height: 10px; border-radius: 50%; background: #ff5f56; }
.dot-yellow { width: 10px; height: 10px; border-radius: 50%; background: #ffbd2e; }
.dot-green { width: 10px; height: 10px; border-radius: 50%; background: #27c93f; }

.window-url {
  color: #888892 !important;
  font-size: 11px !important;
  font-family: var(--font-code, monospace) !important;
  margin-left: 10px !important;
}

.single-project-hero-canvas {
  padding: 65px 40px !important;
  text-align: center !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #1b1b24, #111116) !important;
}

.canvas-tag {
  color: var(--red, #ff5a1f) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.single-project-hero-canvas h2 {
  font-size: 38px !important;
  font-weight: 800 !important;
  margin: 14px 0 10px !important;
  letter-spacing: -0.03em !important;
}

.single-project-hero-canvas p {
  color: #a0a0ab !important;
  font-size: 15px !important;
  max-width: 520px !important;
  margin: 0 auto 24px !important;
  line-height: 1.6 !important;
}

.canvas-metric {
  display: inline-block !important;
  background: var(--red, #ff5a1f) !important;
  color: #ffffff !important;
  padding: 8px 22px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 24px rgba(255, 90, 31, 0.25) !important;
}

.single-project-kpis {
  margin-top: -15px !important;
  margin-bottom: 45px !important;
}

.single-project-kpi-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
}

.kpi-card {
  background: #ffffff !important;
  border: 1px solid #e5e5ea !important;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04) !important;
}

.kpi-card span {
  color: var(--red, #ff5a1f) !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

.kpi-card strong {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #1a1a1e !important;
  letter-spacing: -0.02em !important;
}

.kpi-card small {
  color: #888892 !important;
  font-size: 11px !important;
}

.single-project-story {
  padding: 40px 0 60px !important;
}

.story-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 28px !important;
}

.story-card {
  background: #ffffff !important;
  border: 1px solid #e5e5ea !important;
  border-radius: 16px !important;
  padding: 34px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.03) !important;
}

.story-tag {
  color: var(--red, #ff5a1f) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
}

.story-card h2 {
  font-size: 23px !important;
  font-weight: 800 !important;
  margin: 6px 0 0 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.25 !important;
}

.story-card p {
  color: #55555e !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.story-action {
  margin-top: 10px !important;
}

@media (max-width: 820px) {
  .projects-grid-view {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .story-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .single-project-kpi-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .projects-single-line-heading,
  .single-project-heading {
    font-size: clamp(24px, 6vw, 32px) !important;
  }
  .project-thumb-box {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    flex: 0 0 200px !important;
  }
  .single-project-hero-canvas h2 {
    font-size: 26px !important;
  }
}

/* Service Pages White Background, Single Line Heading & Empty Space Removal */
.unified-public-page .service-detail-hero,
.unified-public-page .service-plans-hero,
.unified-public-page .page-hero-v2,
.service-detail-hero,
.service-plans-hero,
.page-hero-v2,
.svc-page-wrap .page-hero {
  background: #ffffff !important;
  background-image: none !important;
  color: #1a1a22 !important;
  padding: 18px 0 14px !important;
  border-bottom: 1px solid #f0f0f4 !important;
  overflow: hidden !important;
}

.unified-public-page .service-detail-hero::before,
.unified-public-page .service-detail-hero::after,
.unified-public-page .service-plans-hero::before,
.unified-public-page .service-plans-hero::after,
.unified-public-page .page-hero-v2::before,
.unified-public-page .page-hero-v2::after,
.service-detail-hero::before,
.service-detail-hero::after,
.service-plans-hero::before,
.service-plans-hero::after,
.page-hero-v2::before,
.page-hero-v2::after {
  display: none !important;
  content: none !important;
}

.service-detail-hero > .shell,
.service-plans-hero > .shell,
.page-hero-v2-inner {
  display: block !important;
  grid-template-columns: 1fr !important;
  min-height: 0 !important;
}

.service-detail-hero a:first-child {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  transition: color 0.2s ease !important;
}

.service-detail-hero a:first-child:hover {
  color: var(--primary, #ff5a1f) !important;
}

.service-detail-hero .eyebrow,
.service-detail-hero .eyebrow-light,
.page-hero-v2-eyebrow {
  color: var(--primary, #ff5a1f) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.service-detail-hero .eyebrow span,
.service-detail-hero .eyebrow-light span {
  background: var(--primary, #ff5a1f) !important;
  width: 20px !important;
  height: 2px !important;
}

.service-detail-hero h1,
.service-plans-hero h1,
.page-hero-v2-copy h1 {
  color: #111118 !important;
  font-family: var(--font-display, 'Space Grotesk', sans-serif) !important;
  font-size: clamp(20px, 3.2vw, 36px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.035em !important;
  margin: 4px 0 6px 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.service-detail-hero h1 em,
.page-hero-v2-copy h1 em {
  color: var(--primary, #ff5a1f) !important;
  font-style: normal !important;
}

.service-detail-hero p,
.service-plans-hero p,
.page-hero-v2-copy p {
  color: #52525c !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  max-width: 720px !important;
  margin: 0 !important;
}

.service-detail-hero .button,
.service-detail-hero a.button,
.service-plans-hero .button,
.page-hero-v2-actions,
.service-orbit {
  display: none !important;
}