/* ==========================================================================
   LemonadaCore identity layer
   Loaded after style.css and lemonada.css.

   Everything visual on the site is derived from the wordmark: a heavy
   geometric sans, and the lime hexagon sitting inside the "o" of Lemonada.
   That "cell" (ring + hexagon) is the one recurring device — it is the
   section marker, the list bullet, the hero artwork and the banner artwork.
   Nothing else decorates.

   Surfaces: paper (white), bone (a lime-tinted off-white), lime, ink.
   Inner pages get one of three banner treatments by page family so the
   site has rhythm without changing its language.
   ========================================================================== */

:root {
  --lc-ink: #000000;
  --lc-graphite: #141414;
  --lc-paper: #ffffff;
  --lc-bone: #f4f6ee;
  --lc-line: rgba(0, 0, 0, 0.14);
  --lc-line-strong: #000000;
  --lc-lime: #c3fc10;
  --lc-lime-text: #546f01;
  --lc-text: #141414;
  --lc-muted: #4b4f45;

  --font-primary: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-secondary: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-tertiary: "Outfit", "Helvetica Neue", Arial, sans-serif;
}

/* The template's dark mode toggle adds .active-body; the identity surfaces
   follow it through the tokens. */
.active-body {
  --lc-paper: #1a1a1a;
  --lc-bone: #161616;
  --lc-line: rgba(255, 255, 255, 0.16);
  --lc-line-strong: #ffffff;
  --lc-text: #ffffff;
  --lc-muted: rgba(255, 255, 255, 0.72);
  --lc-lime-text: #c3fc10;
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-secondary);
  font-size: 17px;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.title {
  font-family: var(--font-primary);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.sec-title .title {
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.sec-title p {
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  max-width: 56ch;
}

.main-menu .mainmenu > li > a {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
}

.ibt-btn {
  font-family: var(--font-primary);
  font-weight: 500;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   The cell: the "o" of the wordmark. A ring with a lime hexagon inside.
   -------------------------------------------------------------------------- */
.lc-cell {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid currentColor;
  position: relative;
  vertical-align: -3px;
}

.lc-cell::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--lc-lime);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* Section eyebrow: the template draws [ brackets ]. Here it is the hexagon
   and a sentence-case label. */
.sec-title .sub-title {
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  margin-bottom: 14px;
  color: var(--lc-lime-text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  overflow: visible;
}

.sec-title .sub-title::before {
  content: "";
  position: static;
  display: inline-block;
  width: 11px;
  height: 12px;
  flex: 0 0 auto;
  background: var(--lc-lime);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.sec-title .sub-title::after {
  content: none;
}

.sec-title.white .sub-title,
.lc-on-ink .sec-title .sub-title {
  color: var(--lc-lime);
}

/* --------------------------------------------------------------------------
   Honeycomb artwork (inline SVG). Strokes take the surface's text colour;
   the core hexagon is lime unless the surface is lime.
   -------------------------------------------------------------------------- */
.lc-comb {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.lc-comb .lc-hex {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: 0.32;
}

.lc-comb .lc-hex.lc-hex-tint {
  fill: var(--lc-lime);
  stroke: none;
  opacity: 0.16;
}

.lc-comb .lc-core-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
}

.lc-comb .lc-core-hex {
  fill: var(--lc-lime);
}

.lc-on-lime .lc-comb .lc-core-hex,
.lc-banner-lime .lc-comb .lc-core-hex {
  fill: var(--lc-ink);
}

.lc-on-lime .lc-comb .lc-hex.lc-hex-tint,
.lc-banner-lime .lc-comb .lc-hex.lc-hex-tint {
  fill: var(--lc-ink);
  opacity: 0.08;
}

/* One orchestrated moment: the cells of the home hero draw in, then the
   core lands. Nothing else on the site moves on its own. */
.lc-comb-animate .lc-hex {
  animation: lc-hex-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms + 150ms);
}

.lc-comb-animate .lc-core {
  transform-origin: center;
  transform-box: fill-box;
  animation: lc-core-in 0.8s cubic-bezier(0.2, 0.9, 0.2, 1.2) both;
  animation-delay: 1.1s;
}

@keyframes lc-hex-in {
  from { opacity: 0; transform: scale(0.6); transform-origin: center; transform-box: fill-box; }
}

@keyframes lc-core-in {
  from { opacity: 0; transform: scale(0.3); }
}

@media (prefers-reduced-motion: reduce) {
  .lc-comb-animate .lc-hex,
  .lc-comb-animate .lc-core {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */
/* The template's header is absolutely positioned with no stacking order, so
   any positioned section after it in the DOM paints over it. */
.vs-header,
.vs-header6,
.vs-header15 {
  z-index: 20;
}

.lc-hero {
  position: relative;
  background: var(--lc-ink);
  color: #ffffff;
  padding: clamp(150px, 16vw, 230px) 0 0;
  overflow: hidden;
}

.lc-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}

.lc-hero h1 {
  font-size: clamp(46px, 7.4vw, 108px);
  line-height: 0.96;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 32px;
  max-width: 11ch;
  text-wrap: balance;
}

.lc-hero-lede {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  max-width: 46ch;
  margin: 0 0 34px;
}

.lc-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.lc-hero .ibt-btn {
  height: 58px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--lc-lime);
  color: var(--lc-ink);
  border: 1px solid var(--lc-lime);
}

.lc-hero .ibt-btn span,
.lc-hero .ibt-btn:hover span {
  color: var(--lc-ink);
}

.lc-hero .ibt-btn.ibt-btn-outline {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.35);
}

.lc-hero .ibt-btn.ibt-btn-outline span {
  color: #ffffff;
}

.lc-hero .ibt-btn.ibt-btn-outline:hover {
  border-color: var(--lc-lime);
}

.lc-hero .ibt-btn.ibt-btn-outline:hover span {
  color: var(--lc-lime);
}

.lc-hero-art {
  color: #ffffff;
  padding-bottom: 8px;
}

.lc-hero-foot {
  margin-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 22px 0 26px;
}

.lc-hero-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.66);
}

.lc-hero-foot li {
  display: inline-flex;
  align-items: center;
}

.lc-hero-foot li + li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 9px;
  margin: 0 16px;
  background: var(--lc-lime);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  opacity: 0.9;
}

.lc-hero + section,
.lc-banner + section {
  position: relative;
  z-index: 1;
  background-color: var(--lc-paper);
}

/* --------------------------------------------------------------------------
   Statement: one big sentence on paper, cell mark leading it.
   -------------------------------------------------------------------------- */
.lc-claim {
  background: var(--lc-paper);
  color: var(--lc-text);
  padding: clamp(72px, 9vw, 130px) 0;
}

.lc-claim-inner {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.lc-claim .lc-cell {
  width: 28px;
  height: 28px;
  border-width: 3px;
  margin-top: 0.22em;
  color: var(--lc-text);
}

.lc-claim p {
  font-family: var(--font-primary);
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 500;
  margin: 0;
  max-width: 24ch;
  color: var(--lc-text);
  text-wrap: balance;
}

.lc-claim p em {
  font-style: normal;
  color: var(--lc-lime-text);
}

/* --------------------------------------------------------------------------
   Ledger: services as ruled rows instead of a card grid.
   -------------------------------------------------------------------------- */
.lc-ledger-sec {
  background: var(--lc-paper);
  color: var(--lc-text);
  padding: clamp(64px, 8vw, 110px) 0;
}

.lc-ledger-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: end;
  margin-bottom: 44px;
}

.lc-ledger-head .sec-title {
  margin: 0;
}

.lc-ledger-head p {
  margin: 0 0 4px;
  max-width: 46ch;
  color: var(--lc-muted);
  justify-self: end;
}

.lc-ledger {
  border-top: 1px solid var(--lc-line-strong);
}

.lc-row {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 0.9fr) 48px;
  gap: 28px;
  align-items: start;
  padding: 34px 0;
  border-bottom: 1px solid var(--lc-line);
  transition: background-color 0.2s ease;
}

.lc-row:hover,
.lc-row:focus-within {
  background: linear-gradient(90deg, var(--lc-bone), transparent 70%);
}

.lc-row .lc-cell {
  margin-top: 8px;
  color: var(--lc-text);
}

.lc-row-title {
  margin: 0;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.lc-row-title a {
  color: var(--lc-text);
  text-decoration: none;
}

.lc-row-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.lc-row:hover .lc-row-title a {
  color: var(--lc-lime-text);
}

.lc-row-body {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--lc-muted);
  max-width: 54ch;
}

.lc-row-tags {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 14.5px;
  color: var(--lc-muted);
}

.lc-row-tags li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.lc-row-tags li::before {
  content: "";
  width: 7px;
  height: 8px;
  flex: 0 0 auto;
  background: var(--lc-lime);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.lc-row-go {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--lc-line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lc-text);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.lc-row-go svg {
  width: 16px;
  height: 16px;
}

.lc-row:hover .lc-row-go {
  background: var(--lc-lime);
  border-color: var(--lc-lime);
  color: var(--lc-ink);
  transform: translate(2px, -2px);
}

/* --------------------------------------------------------------------------
   Principles: four ruled columns, no icons.
   -------------------------------------------------------------------------- */
.lc-principles-sec {
  background: var(--lc-bone);
  color: var(--lc-text);
  padding: clamp(64px, 8vw, 110px) 0;
}

.lc-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 36px;
  margin-top: 40px;
}

.lc-principle {
  border-top: 2px solid var(--lc-line-strong);
  padding-top: 22px;
}

.lc-principle .lc-cell {
  color: var(--lc-text);
  margin-bottom: 18px;
}

.lc-principle h3 {
  font-size: 21px;
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.lc-principle p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--lc-muted);
}

/* --------------------------------------------------------------------------
   Ink statement: the company in one paragraph, honeycomb beside it.
   -------------------------------------------------------------------------- */
.lc-statement {
  background: var(--lc-ink);
  color: #ffffff;
  padding: clamp(80px, 10vw, 140px) 0;
  overflow: hidden;
}

.lc-statement-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.lc-statement .sec-title .title {
  color: #ffffff;
  max-width: 18ch;
}

.lc-statement p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 17px;
  line-height: 1.7;
  max-width: 58ch;
}

.lc-statement .sec-title p {
  margin-top: 24px;
}

.lc-statement .ibt-btn {
  margin-top: 30px;
  border-color: rgba(255, 255, 255, 0.35);
}

.lc-statement .ibt-btn span {
  color: #ffffff;
}

.lc-statement-art {
  color: #ffffff;
  max-width: 420px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   FAQ: ruled accordion, no card chrome.
   -------------------------------------------------------------------------- */
.lc-faq-sec {
  background: var(--lc-paper);
  color: var(--lc-text);
  padding: clamp(64px, 8vw, 110px) 0;
}

.lc-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.lc-faq-grid .sec-title .title {
  max-width: 14ch;
}

.lc-faq .accordion-item {
  background: transparent;
  border: 0 !important;
  border-bottom: 1px solid var(--lc-line) !important;
  border-radius: 0 !important;
  margin: 0;
}

.lc-faq .accordion-item:first-child {
  border-top: 1px solid var(--lc-line-strong) !important;
}

.lc-faq .accordion-button {
  font-family: var(--font-primary);
  font-size: clamp(19px, 1.6vw, 23px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
  padding: 26px 48px 26px 0;
  background: transparent !important;
  color: var(--lc-text) !important;
  box-shadow: none;
  border-radius: 0;
}

.lc-faq .accordion-button:not(.collapsed) {
  color: var(--lc-lime-text) !important;
}

.lc-faq .accordion-button::after {
  width: 14px;
  height: 14px;
  background: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-4px);
  transition: transform 0.2s ease;
}

.lc-faq .accordion-button:not(.collapsed)::after {
  transform: rotate(-135deg) translateY(-4px);
}

.lc-faq .accordion-body {
  padding: 0 0 30px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--lc-muted);
  max-width: 60ch;
}

/* --------------------------------------------------------------------------
   Inner-page banners: one component, three surfaces.
   -------------------------------------------------------------------------- */
.lc-banner {
  position: relative;
  overflow: hidden;
  padding: clamp(140px, 15vw, 210px) 0 clamp(56px, 6vw, 84px);
}

.lc-banner-ink {
  background: var(--lc-ink);
  color: #ffffff;
}

.lc-banner-lime {
  background: var(--lc-lime);
  color: var(--lc-ink);
}

/* .active-body sets `color: #fff !important` on every heading and paragraph.
   Lime keeps its own ground in dark mode, so the ink label has to win back. */
.active-body .lc-banner-lime :is(h1, h2, h3, h4, h5, h6, p, li) {
  color: var(--lc-ink) !important;
}

.lc-banner-paper {
  background: var(--lc-bone);
  color: var(--lc-text);
}

.lc-banner-legal {
  background: var(--lc-paper);
  color: var(--lc-text);
  padding-bottom: 36px;
  border-bottom: 1px solid var(--lc-line);
}

.lc-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  opacity: 0.72;
  margin: 0 0 clamp(36px, 5vw, 64px);
}

.lc-crumbs a {
  color: inherit;
  text-decoration: none;
}

.lc-crumbs a:hover {
  text-decoration: underline;
}

.lc-banner-lime .lc-crumbs a:hover,
.lc-banner-ink .lc-crumbs a:hover {
  color: inherit;
}

.lc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
}

.lc-banner h1 {
  margin: 14px 0 0;
  font-size: clamp(40px, 6.2vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 600;
  color: inherit;
  max-width: 13ch;
  text-wrap: balance;
}

.lc-banner-legal h1 {
  font-size: clamp(32px, 4vw, 56px);
}

.lc-banner-lede {
  margin: 26px 0 0;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  max-width: 44ch;
  opacity: 0.82;
}

.lc-banner-copy {
  position: relative;
  z-index: 1;
}

.lc-banner-art {
  position: absolute;
  inset-inline-end: -3vw;
  bottom: -8vw;
  width: min(44vw, 560px);
  pointer-events: none;
  color: inherit;
}

.lc-banner-paper .lc-banner-art {
  width: min(36vw, 420px);
  bottom: -10vw;
}

.lc-banner-lime .lc-comb .lc-hex {
  opacity: 0.55;
}

.lc-banner-legal .lc-banner-art {
  display: none;
}

/* --------------------------------------------------------------------------
   Generated inner pages: flatten the cards into ruled columns.
   -------------------------------------------------------------------------- */
.lc-page {
  background: var(--lc-paper);
  color: var(--lc-text);
}

.lc-page .lc-card {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--lc-line-strong);
  border-radius: 0;
  padding: 24px 0 0;
}

.lc-page .lc-card:hover {
  border-color: var(--lc-lime-text);
  transform: none;
}

.lc-page .lc-card-title {
  color: var(--lc-text);
}

.lc-page .lc-card p,
.lc-page .lc-lede p {
  color: var(--lc-muted);
}

.lc-page .lc-capabilities li {
  color: var(--lc-text);
  border-color: var(--lc-line);
}

.lc-page .lc-capabilities li::before {
  width: 10px;
  height: 11px;
  border-radius: 0;
  inset-block-start: 16px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* --------------------------------------------------------------------------
   Marquee (services page only): smaller, cells instead of slashes.
   -------------------------------------------------------------------------- */
.marquee span {
  font-family: var(--font-primary);
  font-size: clamp(32px, 4.5vw, 64px);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.marquee .lc-sep {
  display: inline-block;
  width: 0.42em;
  height: 0.48em;
  margin: 0 0.55em;
  vertical-align: 0.02em;
  background: var(--lc-ink);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* The marquee inherits ink from the page rather than setting its own colour,
   so it stays black when the ground turns dark and vanishes. Light is left
   exactly as it was; only the dark ground gets a legible pair. */
.active-body .marquee span {
  color: var(--lc-text);
}

.active-body .marquee .lc-sep {
  background: var(--lc-text);
}

/* --------------------------------------------------------------------------
   Contact block and footer
   -------------------------------------------------------------------------- */
.contact-form {
  border-radius: 10px;
}

/* The template paints this card with --color-content-white, which dark mode
   never redefines, while .active-body forces its heading, paragraph and
   button labels to white. The card has to follow the theme or the whole
   block reads as blank. */
.active-body .contact-form {
  background-color: var(--lc-paper);
}

.contact-actions h2 {
  letter-spacing: -0.03em;
}

.footer-content .title {
  font-family: var(--font-primary);
  font-weight: 600;
  letter-spacing: -0.035em;
  font-size: clamp(36px, 5vw, 76px);
  line-height: 1.02;
  background: none;
  color: var(--lc-lime);
  -webkit-text-fill-color: var(--lc-lime);
  max-width: 16ch;
}

.footer-style1 .widget-title {
  font-family: var(--font-primary);
  font-weight: 600;
}

/* The footer sign-off echoes the tracked "CORE" under the wordmark. */
.footer-botom .lc-core-word {
  font-family: var(--font-primary);
  font-weight: 600;
  letter-spacing: 0.32em;
  font-size: 12px;
  margin-inline-start: 10px;
  color: var(--lc-lime);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .lc-hero {
    padding-top: 150px;
  }
  .lc-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lc-row {
    grid-template-columns: 32px minmax(0, 1fr) 48px;
    grid-template-areas:
      "cell title go"
      "cell body body"
      "cell tags tags";
    gap: 14px 20px;
  }
  .lc-row .lc-cell { grid-area: cell; }
  .lc-row-title { grid-area: title; }
  .lc-row-body { grid-area: body; }
  .lc-row-tags { grid-area: tags; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-row-go { grid-area: go; }
}

@media (max-width: 991px) {
  .lc-hero-grid,
  .lc-statement-grid,
  .lc-faq-grid,
  .lc-ledger-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .lc-hero-art {
    max-width: 300px;
    margin-inline-start: auto;
  }
  .lc-ledger-head p {
    justify-self: start;
  }
  .lc-statement-art {
    max-width: 320px;
    margin-inline: 0;
  }
  .lc-banner-art {
    width: 60vw;
    inset-inline-end: -18vw;
    bottom: -22vw;
    opacity: 0.6;
  }
}

@media (max-width: 767px) {
  .lc-hero {
    padding-top: 120px;
  }
  .lc-hero h1 {
    font-size: clamp(40px, 11vw, 60px);
  }
  .lc-banner {
    padding-top: 120px;
  }
  .lc-banner h1 {
    font-size: clamp(34px, 9.5vw, 52px);
  }
  .lc-principles {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .lc-claim-inner {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 16px;
  }
  .lc-claim .lc-cell {
    width: 22px;
    height: 22px;
  }
  .lc-row {
    padding: 26px 0;
  }
  .lc-row-tags {
    grid-template-columns: minmax(0, 1fr);
  }
  .lc-hero-foot li + li::before {
    margin: 0 10px;
  }
}

/* --------------------------------------------------------------------------
   Template artwork that leaks around the contact block

   .main-sec paints a swirl (layer11.png) above itself and a glow
   (layer1-3.png) at its foot. Both are stock decoration and show through on
   any page where a light section does not happen to cover them.
   -------------------------------------------------------------------------- */
.main-sec::before,
.main-sec::after {
  display: none;
}

/* --------------------------------------------------------------------------
   Navigation

   Desktop dropdown. The template forces white link text (!important) for
   its own ink mega-menu; lemonada.css then turned the panel white, which
   left white links on a white panel. The panel goes back to ink, where the
   brand's lime hover belongs, and every template glyph is replaced by the
   cell marker.
   -------------------------------------------------------------------------- */
.main-menu .mainmenu > li > .sub-menu {
  min-width: 264px;
  padding: 10px;
  background: var(--lc-ink);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
}

.main-menu > ul li .sub-menu li a,
.main-menu .mainmenu > li > .sub-menu li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px !important;
  border-radius: 9px;
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.86) !important;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.main-menu > ul li .sub-menu li a::before,
.main-menu .mainmenu > li > .sub-menu li a::before {
  content: "";
  position: static;
  display: inline-block;
  width: 8px;
  height: 9px;
  flex: 0 0 auto;
  font: inherit;
  line-height: 0;
  opacity: 0.35;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.main-menu > ul li .sub-menu li a::after {
  content: none;
}

.main-menu > ul li .sub-menu li a:hover,
.main-menu .mainmenu > li > .sub-menu li a:hover,
.main-menu > ul li .sub-menu li .active,
.main-menu .mainmenu > li > .sub-menu li a.active {
  padding-inline-start: 12px !important;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff !important;
}

.main-menu > ul li .sub-menu li a:hover::before,
.main-menu .mainmenu > li > .sub-menu li a:hover::before,
.main-menu > ul li .sub-menu li .active::before,
.main-menu .mainmenu > li > .sub-menu li a.active::before {
  opacity: 1;
  background: var(--lc-lime);
}

/* Top-level items */
.main-menu .mainmenu > li > a {
  color: var(--lc-text);
}

.main-menu .mainmenu > li:not(.active) > a:hover {
  background: var(--lc-bone);
  color: var(--lc-text);
}

.active-body .main-menu .mainmenu > li:not(.active) > a:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   Offcanvas menu (phones and tablets)

   The template's flat list indented children with non-breaking spaces and
   set every item in bold caps. The list is now grouped: a section link and
   its pages beneath it, always expanded, on an ink panel.
   -------------------------------------------------------------------------- */
.side-menu2 {
  width: min(380px, 90vw);
  /* The template pins a physical `right`, which stays put in Arabic. Clearing
     the start edge as well cancels it, so the panel enters from the same side
     as the hamburger that opens it in both directions. */
  inset-inline-start: auto;
  inset-inline-end: calc(-1 * min(380px, 90vw) - 12px);
  padding: 22px 28px 40px;
  background: var(--lc-ink);
  color: #ffffff;
  border: 0;
}

.side-menu2.active {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.side-menu2 .menu-btns {
  top: 24px;
  inset-inline-start: auto;
  inset-inline-end: 28px;
}

.side-menu2 .menu-btns .popup-search i,
.side-menu2 #mobileCloseBtn2::before {
  color: #ffffff;
}

.side-menu2 .lc-offcanvas-logo {
  display: block;
  margin: 8px 0 0;
}

.side-menu2 .lc-offcanvas-logo img {
  max-height: 30px;
  width: auto;
}

.side-menu2 > ul.offcanvas-menu {
  padding: 40px 0 28px;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.side-menu2 > ul.offcanvas-menu > li {
  margin: 0 0 22px;
}

.side-menu2 > ul.offcanvas-menu > li:last-child {
  margin-bottom: 0;
}

.side-menu2 > ul.offcanvas-menu > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: auto;
  padding: 4px 0;
  font-family: var(--font-primary);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-transform: none;
  color: #ffffff;
}

.side-menu2 > ul.offcanvas-menu > li > a::before {
  content: "" !important;
  position: static;
  display: inline-block;
  width: 10px;
  height: 11px;
  flex: 0 0 auto;
  font: inherit;
  line-height: 0;
  transform: none;
  background: rgba(255, 255, 255, 0.28);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.side-menu2 > ul.offcanvas-menu > li.active > a,
.side-menu2 > ul.offcanvas-menu > li.lc-current > a,
.side-menu2 > ul.offcanvas-menu > li > a:hover {
  color: var(--lc-lime);
}

.side-menu2 > ul.offcanvas-menu > li.active > a::before,
.side-menu2 > ul.offcanvas-menu > li.lc-current > a::before,
.side-menu2 > ul.offcanvas-menu > li > a:hover::before {
  background: var(--lc-lime);
}

/* Child pages: always visible, indented under the marker. */
.side-menu2 > ul.offcanvas-menu ul.lc-offcanvas-sub {
  position: static;
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  padding-inline-start: 22px;
  opacity: 1;
  visibility: visible;
  height: auto;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}

.side-menu2 > ul.offcanvas-menu ul.lc-offcanvas-sub::before {
  content: none;
}

.side-menu2 > ul.offcanvas-menu ul.lc-offcanvas-sub li {
  margin: 0;
}

.side-menu2 > ul.offcanvas-menu ul.lc-offcanvas-sub li a {
  display: block;
  height: auto;
  margin: 0;
  padding: 7px 0;
  font-family: var(--font-primary);
  font-size: 15.5px;
  font-weight: 400;
  line-height: 1.35;
  text-transform: none;
  color: rgba(255, 255, 255, 0.74);
}

.side-menu2 > ul.offcanvas-menu ul.lc-offcanvas-sub li a:hover,
.side-menu2 > ul.offcanvas-menu ul.lc-offcanvas-sub li.active a,
.side-menu2 > ul.offcanvas-menu ul.lc-offcanvas-sub li.lc-current a {
  color: var(--lc-lime);
}

.side-menu2 .menu-links {
  padding-top: 26px;
}

.side-menu2 .menu-links > span {
  font-family: var(--font-primary);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 12px;
}

.side-menu2 .menu-links .social-icon {
  margin-bottom: 28px;
}

.side-menu2 .menu-links .social-icon li a {
  color: #ffffff;
}

.side-menu2 .menu-links .social-icon li a:hover {
  color: var(--lc-lime);
}

.side-menu2 .menu-links .ibt-btn {
  height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--lc-lime);
  border-color: var(--lc-lime);
}

.side-menu2 .menu-links .ibt-btn span,
.side-menu2 .menu-links .ibt-btn:hover span {
  color: var(--lc-ink);
}

.side-menu2 .lc-offcanvas-contact {
  margin: 0 0 22px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.74);
}

.side-menu2 .lc-offcanvas-contact a {
  color: #ffffff;
  display: block;
  padding: 3px 0;
}

.side-menu2 .lc-offcanvas-contact a:hover {
  color: var(--lc-lime);
}

.overlay2 {
  background: rgba(0, 0, 0, 0.6);
}

.hamburger span {
  background: var(--lc-text);
}

/* The page you are on, inside the dropdown: lime marker and lime label.
   Template and JS both hang .active on the link, so the rule matches that. */
.main-menu > ul li .sub-menu li a.active,
.main-menu .mainmenu > li > .sub-menu li a.active {
  color: var(--lc-lime) !important;
  background: rgba(195, 252, 16, 0.08);
}

.main-menu > ul li .sub-menu li a.active::before,
.main-menu .mainmenu > li > .sub-menu li a.active::before {
  opacity: 1;
  background: var(--lc-lime);
}

.main-menu .mainmenu > li > .sub-menu li a::before {
  opacity: 0.5;
}

/* The template clears the marker's background with !important; the cell
   marker has to claim it back at higher specificity. */
.main-menu .mainmenu > li > .sub-menu li a::before {
  background-color: currentColor !important;
}

.main-menu .mainmenu > li > .sub-menu li a:hover::before,
.main-menu .mainmenu > li > .sub-menu li a.active::before {
  background-color: var(--lc-lime) !important;
}

.main-menu .mainmenu > li > .sub-menu li a.active {
  background-color: rgba(195, 252, 16, 0.08) !important;
}