/* ==========================================================================
   NORTHCODE STARTER SYSTEM. Don't edit per client: change tokens.css instead.

   1. Engine: turns the numbers in tokens.css into fluid sizes
   2. Elementor bridge: Elementor's global colours, fonts, widths and gaps follow the tokens
   3. Base: body, headings, text, links
   4. Classes: layout, type, colour, buttons, images
   Anything you set by hand on one Elementor widget still wins over a class,
   so one-off changes are always possible.
   ========================================================================== */

/* ── 1. ENGINE ───────────────────────────────────────────────────────── */
:root {
  /* 0px on the phone screen → 1px on the desktop screen. Every size is: phone + (desktop − phone) × this */
  --_fl: calc((100vw - var(--screen-phone) * 1px) / (var(--screen-desktop) - var(--screen-phone)));

  --fs-small: clamp(calc(var(--small-phone) * 1rem / 16), calc(var(--small-phone) * 1rem / 16 + (var(--small-desktop) - var(--small-phone)) * var(--_fl)), calc(var(--small-desktop) * 1rem / 16));
  --fs-body: clamp(calc(var(--body-phone) * 1rem / 16), calc(var(--body-phone) * 1rem / 16 + (var(--body-desktop) - var(--body-phone)) * var(--_fl)), calc(var(--body-desktop) * 1rem / 16));
  --fs-lead: clamp(calc(var(--lead-phone) * 1rem / 16), calc(var(--lead-phone) * 1rem / 16 + (var(--lead-desktop) - var(--lead-phone)) * var(--_fl)), calc(var(--lead-desktop) * 1rem / 16));
  --fs-h4: clamp(calc(var(--h4-phone) * 1rem / 16), calc(var(--h4-phone) * 1rem / 16 + (var(--h4-desktop) - var(--h4-phone)) * var(--_fl)), calc(var(--h4-desktop) * 1rem / 16));
  --fs-h3: clamp(calc(var(--h3-phone) * 1rem / 16), calc(var(--h3-phone) * 1rem / 16 + (var(--h3-desktop) - var(--h3-phone)) * var(--_fl)), calc(var(--h3-desktop) * 1rem / 16));
  --fs-h2: clamp(calc(var(--h2-phone) * 1rem / 16), calc(var(--h2-phone) * 1rem / 16 + (var(--h2-desktop) - var(--h2-phone)) * var(--_fl)), calc(var(--h2-desktop) * 1rem / 16));
  --fs-h1: clamp(calc(var(--h1-phone) * 1rem / 16), calc(var(--h1-phone) * 1rem / 16 + (var(--h1-desktop) - var(--h1-phone)) * var(--_fl)), calc(var(--h1-desktop) * 1rem / 16));
  --fs-display: clamp(calc(var(--display-phone) * 1rem / 16), calc(var(--display-phone) * 1rem / 16 + (var(--display-desktop) - var(--display-phone)) * var(--_fl)), calc(var(--display-desktop) * 1rem / 16));

  --sp-3xs: clamp(calc(var(--space-3xs-phone) * 1rem / 16), calc(var(--space-3xs-phone) * 1rem / 16 + (var(--space-3xs-desktop) - var(--space-3xs-phone)) * var(--_fl)), calc(var(--space-3xs-desktop) * 1rem / 16));
  --sp-2xs: clamp(calc(var(--space-2xs-phone) * 1rem / 16), calc(var(--space-2xs-phone) * 1rem / 16 + (var(--space-2xs-desktop) - var(--space-2xs-phone)) * var(--_fl)), calc(var(--space-2xs-desktop) * 1rem / 16));
  --sp-xs: clamp(calc(var(--space-xs-phone) * 1rem / 16), calc(var(--space-xs-phone) * 1rem / 16 + (var(--space-xs-desktop) - var(--space-xs-phone)) * var(--_fl)), calc(var(--space-xs-desktop) * 1rem / 16));
  --sp-s: clamp(calc(var(--space-s-phone) * 1rem / 16), calc(var(--space-s-phone) * 1rem / 16 + (var(--space-s-desktop) - var(--space-s-phone)) * var(--_fl)), calc(var(--space-s-desktop) * 1rem / 16));
  --sp-m: clamp(calc(var(--space-m-phone) * 1rem / 16), calc(var(--space-m-phone) * 1rem / 16 + (var(--space-m-desktop) - var(--space-m-phone)) * var(--_fl)), calc(var(--space-m-desktop) * 1rem / 16));
  --sp-l: clamp(calc(var(--space-l-phone) * 1rem / 16), calc(var(--space-l-phone) * 1rem / 16 + (var(--space-l-desktop) - var(--space-l-phone)) * var(--_fl)), calc(var(--space-l-desktop) * 1rem / 16));
  --sp-xl: clamp(calc(var(--space-xl-phone) * 1rem / 16), calc(var(--space-xl-phone) * 1rem / 16 + (var(--space-xl-desktop) - var(--space-xl-phone)) * var(--_fl)), calc(var(--space-xl-desktop) * 1rem / 16));
  --sp-2xl: clamp(calc(var(--space-2xl-phone) * 1rem / 16), calc(var(--space-2xl-phone) * 1rem / 16 + (var(--space-2xl-desktop) - var(--space-2xl-phone)) * var(--_fl)), calc(var(--space-2xl-desktop) * 1rem / 16));
  --sp-3xl: clamp(calc(var(--space-3xl-phone) * 1rem / 16), calc(var(--space-3xl-phone) * 1rem / 16 + (var(--space-3xl-desktop) - var(--space-3xl-phone)) * var(--_fl)), calc(var(--space-3xl-desktop) * 1rem / 16));
  --sp-section: clamp(calc(var(--section-phone) * 1rem / 16), calc(var(--section-phone) * 1rem / 16 + (var(--section-desktop) - var(--section-phone)) * var(--_fl)), calc(var(--section-desktop) * 1rem / 16));
  --gutter: clamp(calc(var(--gutter-phone) * 1rem / 16), calc(var(--gutter-phone) * 1rem / 16 + (var(--gutter-desktop) - var(--gutter-phone)) * var(--_fl)), calc(var(--gutter-desktop) * 1rem / 16));

  /* Colours mixed from the five in tokens.css */
  --c-heading: var(--c-ink);
  --c-text:    color-mix(in srgb, var(--c-ink) 86%, var(--c-bg));
  --c-muted:   color-mix(in srgb, var(--c-ink) 66%, var(--c-bg));
  --c-line:    color-mix(in srgb, var(--c-ink) 13%, var(--c-bg));
  --c-soft:    color-mix(in srgb, var(--c-brand) 6%, var(--c-bg));
  --c-link:    color-mix(in srgb, var(--c-accent) 62%, var(--c-ink));  /* accent darkened enough to read as small text */
  --c-eyebrow: var(--c-link);
  --shadow:    0 1px 2px color-mix(in srgb, var(--c-ink) 6%, transparent), 0 8px 24px color-mix(in srgb, var(--c-ink) 8%, transparent);
}

/* ── 2. ELEMENTOR BRIDGE ─────────────────────────────────────────────
   Elementor's four global colours and fonts are pointed at the tokens, so any widget left on
   its defaults follows the system. Leave Site Settings › Typography sizes empty. */
body[class*="elementor-kit-"] {
  --e-global-color-primary: var(--c-heading);   /* Elementor uses "Primary" for headings */
  --e-global-color-secondary: var(--c-brand);
  --e-global-color-text: var(--c-text);
  --e-global-color-accent: var(--c-accent);     /* and "Accent" for buttons */
  --e-global-typography-primary-font-family: var(--font-head);
  --e-global-typography-primary-font-weight: var(--fw-head);
  --e-global-typography-secondary-font-family: var(--font-head);
  --e-global-typography-secondary-font-weight: var(--fw-head);
  --e-global-typography-text-font-family: var(--font-body);
  --e-global-typography-text-font-weight: var(--fw-body);
  --e-global-typography-accent-font-family: var(--font-body);
  --e-global-typography-accent-font-weight: var(--fw-bold);
}
/* Containers: content width from the tokens, no stray 10px padding, gaps from the scale */
body[class*="elementor-kit-"] .e-con {
  --container-max-width: var(--max);
  --container-default-padding-top: 0px;
  --container-default-padding-right: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
  --widgets-spacing: var(--sp-s);
  --widgets-spacing-row: var(--sp-s);
  --widgets-spacing-column: var(--sp-s);
}
/* Top-level containers always keep the fluid side gutter, so nothing touches the screen edge */
body [data-elementor-id] > .e-con {
  --container-default-padding-left: var(--gutter);
  --container-default-padding-right: var(--gutter);
}

/* ── 3. BASE ─────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
html body {
  background-color: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--font-head);
  font-weight: var(--fw-head);
  color: var(--c-heading);
  line-height: var(--lh-head, 1.2);
  letter-spacing: var(--ls-head, 0);
  text-wrap: balance;
}
body .elementor-heading-title { line-height: var(--lh-head, 1.2); letter-spacing: var(--ls-head, 0); text-wrap: balance; }

/* Heading sizes. The tag (H1–H6) is for Google and screen readers; the class sets the look.
   So an H2 can look like an H1 with class "h1", and the page outline stays correct. */
body h1, body .h1, body .h1 .elementor-heading-title { font-size: var(--fs-h1); --lh-head: 1.08; --ls-head: -0.02em; }
body h2, body .h2, body .h2 .elementor-heading-title { font-size: var(--fs-h2); --lh-head: 1.12; --ls-head: -0.015em; }
body h3, body .h3, body .h3 .elementor-heading-title { font-size: var(--fs-h3); --lh-head: 1.2;  --ls-head: -0.01em; }
body h4, body .h4, body .h4 .elementor-heading-title { font-size: var(--fs-h4); --lh-head: 1.3;  --ls-head: 0; }
body h5, body h6 { font-size: var(--fs-body); --lh-head: 1.4; }
body .display, body .display .elementor-heading-title { font-size: var(--fs-display); --lh-head: 1.02; --ls-head: -0.03em; }

body p { margin: 0 0 1em; text-wrap: pretty; }
body p:last-child { margin-bottom: 0; }
body .elementor-widget-text-editor :is(ul, ol) { margin: 0 0 1em; padding-inline-start: 1.25em; }
body .elementor-widget-text-editor :is(ul, ol):last-child { margin-bottom: 0; }
body .elementor-widget-text-editor li + li { margin-top: 0.4em; }
/* Headings written inside a Text Editor get space above them, so long-form text reads properly */
body .elementor-widget-text-editor :is(h2, h3, h4, h5, h6) { margin: 1.6em 0 0.5em; }
body .elementor-widget-text-editor :is(h2, h3, h4, h5, h6):first-child { margin-top: 0; }
body strong, body b { font-weight: var(--fw-bold); }
body a { color: var(--c-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
body a:hover { color: var(--c-heading); }
body img { max-width: 100%; height: auto; }
body :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── 3b. PLAIN PAGES ────────────────────────────────────────────────
   Pages not built with Elementor (Privacy Policy, blog posts, 404) use Hello's own template.
   Give them a readable column, proper spacing between headings and paragraphs, and a tidy header. */
html body:not([class*="elementor-page-"]) .site-main {
  width: 100%;
  max-width: calc(var(--max-narrow) + var(--gutter) * 2);
  margin-inline: auto;
  padding: var(--sp-section) var(--gutter);
}
body .site-main .page-header { margin-bottom: var(--sp-xl); }
body .site-main .page-header .entry-title { font-size: var(--fs-h1); }

/* Long-form text: Hello's page/post content, and the .prose class for any Elementor Text Editor */
body :is(.page-content, .entry-content, .prose) > * { margin-block: 0 1em; }
body :is(.page-content, .entry-content, .prose) > :last-child { margin-bottom: 0; }
body :is(.page-content, .entry-content, .prose) > :is(h2, h3, h4, h5, h6),
body .prose :is(h2, h3, h4, h5, h6) { margin-block: 1.8em 0.5em; }
body :is(.page-content, .entry-content, .prose) > :is(h2, h3, h4, h5, h6):first-child { margin-top: 0; }
body :is(.page-content, .entry-content) > h2, body .prose h2 { font-size: var(--fs-h3); }
body :is(.page-content, .entry-content) > h3, body .prose h3 { font-size: var(--fs-h4); }
body :is(.page-content, .entry-content) > :is(ul, ol) { padding-inline-start: 1.25em; }
body :is(.page-content, .entry-content) li + li { margin-top: 0.4em; }
body :is(.page-content, .entry-content) > blockquote { margin-inline: 0; padding-inline-start: var(--sp-m); border-left: 3px solid var(--c-accent); }

/* Hello's built-in header and footer (until you build your own in Elementor) */
body :is(.site-header, .site-footer) { padding-block: var(--sp-m); padding-inline: var(--gutter); max-width: none; }
body .site-header { border-bottom: 1px solid var(--c-line); }
body .site-footer { border-top: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-muted); }
body :is(.site-header, .site-footer) .site-title { margin: 0; font-family: var(--font-head); font-size: var(--fs-h4); font-weight: var(--fw-head); line-height: 1.2; }
body :is(.site-header, .site-footer) .site-title a { color: var(--c-heading); text-decoration: none; }
body :is(.site-header, .site-footer) .site-description { margin: 0; font-size: var(--fs-small); color: var(--c-muted); }
body :is(.site-header, .site-footer) .site-navigation a { color: var(--c-heading); text-decoration: none; }

/* ── 4. CLASSES ──────────────────────────────────────────────────────
   In Elementor: select the widget or container › Advanced › CSS Classes › type the class name
   (several, separated by spaces). */

/* Sections: put on the outer container of every section. Fluid space above and below, gutter at the sides. */
body :is(.section, .section-s, .section-l) {
  --pad-y: var(--sp-section);
  --padding-top: var(--pad-y);
  --padding-bottom: var(--pad-y);
  --padding-left: var(--gutter);
  --padding-right: var(--gutter);
}
body .section-s { --pad-y: calc(var(--sp-section) * 0.55); }
body .section-l { --pad-y: calc(var(--sp-section) * 1.35); }
body .flush-top { --padding-top: 0px; }
body .flush-bottom { --padding-bottom: 0px; }
body :is(.section, .section-s, .section-l):not(.e-con) { padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left); }
body .narrow { --content-width: min(100%, var(--max-narrow)); }
body .wrap { width: 100%; max-width: var(--content-width, var(--max)); margin-inline: auto; } /* plain HTML only; Elementor's Boxed container does this */

/* Grids: columns that drop to fewer on smaller screens by themselves. No breakpoints to set.
   grid-2/3/4 = at most 2/3/4 columns. grid-auto = as many as fit. split = two halves, vertically centred. */
body .grid-2    { --cols: 2; --grid-min: 20rem; }
body .grid-3    { --cols: 3; --grid-min: 16rem; }
body .grid-4    { --cols: 4; --grid-min: 12.5rem; }
body .grid-auto { --cols: 12; --grid-min: 15rem; }
body .split     { --cols: 2; --grid-min: 22rem; }
body .e-con:is(.grid-2, .grid-3, .grid-4, .grid-auto, .split):not(.e-con-boxed),
body .e-con:is(.grid-2, .grid-3, .grid-4, .grid-auto, .split) > .e-con-inner,
body :is(.grid-2, .grid-3, .grid-4, .grid-auto, .split):not(.e-con) {
  display: grid;
  --_g: var(--grid-gap, var(--sp-l));
  gap: var(--_g);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(var(--grid-min), (100% - (var(--cols) - 1) * var(--_g)) / var(--cols))), 1fr));
  align-items: stretch;
}
body .e-con.split:not(.e-con-boxed), body .e-con.split > .e-con-inner, body .split:not(.e-con) { --_g: var(--grid-gap, var(--sp-2xl)); align-items: center; }

/* Cluster: a row that wraps, for buttons, tags and logos */
body .cluster { --container-widget-width: initial; --container-widget-flex-grow: 0; }
body .e-con.cluster:not(.e-con-boxed), body .e-con.cluster > .e-con-inner, body .cluster:not(.e-con) {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sp-s);
}
body .cluster.center:is(.e-con:not(.e-con-boxed), :not(.e-con)), body .e-con.cluster.center > .e-con-inner { justify-content: center; }

/* Text width and alignment */
body .measure { max-width: var(--measure); }
body .center { text-align: center; }
body .center .measure, body .measure.center { margin-inline: auto; }

/* Type */
body .lead, body .lead .elementor-heading-title { font-size: var(--fs-lead); line-height: 1.5; }
body .small, body .small .elementor-heading-title { font-size: var(--fs-small); line-height: 1.5; }
/* body-text: make a Heading widget look like normal paragraph text (e.g. an H3 card description) */
body .body-text, body .body-text .elementor-heading-title { font-family: var(--font-body); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: 1.6; letter-spacing: 0; color: var(--c-text); }
body .eyebrow, body .eyebrow .elementor-heading-title {
  font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-bold);
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; color: var(--c-eyebrow);
}
body .muted { --e-global-color-text: var(--c-muted); --e-global-color-primary: var(--c-muted); --c-heading: var(--c-muted); color: var(--c-muted); }
body .text-accent, body .text-accent .elementor-heading-title { color: var(--c-accent); }

/* Backgrounds. Light ones keep dark text; dark ones flip text, headings, lines and ghost buttons to light. */
body .bg-soft    { background-color: var(--c-soft); }
body .bg-surface { background-color: var(--c-surface); }
body .bg-ink     { background-color: var(--c-ink); }
body .bg-brand   { background-color: var(--c-brand); }
body .bg-gradient { background-image: var(--gradient); background-color: var(--c-ink); }
body :is(.on-dark, .bg-ink, .bg-brand, .bg-gradient) {
  --c-heading: #FFFFFF;
  --c-text: color-mix(in srgb, #FFFFFF 86%, transparent);
  --c-muted: color-mix(in srgb, #FFFFFF 68%, transparent);
  --c-line: color-mix(in srgb, #FFFFFF 18%, transparent);
  --c-link: #FFFFFF;
  --c-eyebrow: var(--c-accent);
  --e-global-color-primary: var(--c-heading);
  --e-global-color-text: var(--c-text);
  color: var(--c-text);
}
/* Cards, and anything light inside a dark section, go back to dark text */
body :is(.on-light, .card, .bg-soft, .bg-surface) {
  --c-heading: var(--c-ink);
  --c-text: color-mix(in srgb, var(--c-ink) 86%, var(--c-bg));
  --c-muted: color-mix(in srgb, var(--c-ink) 66%, var(--c-bg));
  --c-line: color-mix(in srgb, var(--c-ink) 13%, var(--c-bg));
  --c-link: color-mix(in srgb, var(--c-accent) 62%, var(--c-ink));
  --c-eyebrow: var(--c-link);
  --e-global-color-primary: var(--c-heading);
  --e-global-color-text: var(--c-text);
  color: var(--c-text);
}

/* Card: a container with a surface, a hairline and soft corners */
body .card {
  --padding-top: var(--sp-m); --padding-bottom: var(--sp-m); --padding-left: var(--sp-m); --padding-right: var(--sp-m);
  --gap: var(--sp-xs); --row-gap: var(--sp-xs); --column-gap: var(--sp-xs);
  background-color: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
}
body .card:not(.e-con) { padding: var(--sp-m); display: flex; flex-direction: column; gap: var(--sp-xs); }
body .shadow { box-shadow: var(--shadow); }
body .rounded, body .rounded img { border-radius: var(--radius-l); overflow: hidden; }
body .line-top { border-top: 1px solid var(--c-line); }

/* Stacks: the gap between everything inside a container (after .card so "card stack-m" works) */
body .stack-2xs { --gap: var(--sp-2xs); --row-gap: var(--sp-2xs); --column-gap: var(--sp-2xs); }
body .stack-xs  { --gap: var(--sp-xs);  --row-gap: var(--sp-xs);  --column-gap: var(--sp-xs); }
body .stack-s   { --gap: var(--sp-s);   --row-gap: var(--sp-s);   --column-gap: var(--sp-s); }
body .stack-m   { --gap: var(--sp-m);   --row-gap: var(--sp-m);   --column-gap: var(--sp-m); }
body .stack-l   { --gap: var(--sp-l);   --row-gap: var(--sp-l);   --column-gap: var(--sp-l); }
body .stack-xl  { --gap: var(--sp-xl);  --row-gap: var(--sp-xl);  --column-gap: var(--sp-xl); }
body .stack-2xl { --gap: var(--sp-2xl); --row-gap: var(--sp-2xl); --column-gap: var(--sp-2xl); }
body :is(.stack-2xs, .stack-xs, .stack-s, .stack-m, .stack-l, .stack-xl, .stack-2xl):not(.e-con) { display: flex; flex-direction: column; gap: var(--row-gap); }

/* Buttons: style the Elementor Button widget (and .btn in plain HTML). Default = solid accent.
   Elementor writes a background colour onto every Button widget by its own ID. The variant classes
   repeat their name (.btn-ghost.btn-ghost.btn-ghost) so they're strong enough to beat it.
   So a variant class wins over the widget's colour settings: to make a one-off colour, remove the class. */
body .elementor-widget-button .elementor-button, body .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 44px; padding: 0.8em 1.6em;
  font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-body); line-height: 1.2;
  background-color: var(--c-accent); color: var(--c-on-accent);
  border: 2px solid var(--c-accent); border-radius: var(--radius-btn);
  text-decoration: none; transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
body .elementor-widget-button .elementor-button:is(:hover, :focus-visible), body .btn:is(:hover, :focus-visible) {
  background-color: color-mix(in srgb, var(--c-accent) 86%, #000); border-color: color-mix(in srgb, var(--c-accent) 86%, #000);
  color: var(--c-on-accent); transform: translateY(-1px);
}
body .elementor-widget-button.btn-ghost.btn-ghost.btn-ghost .elementor-button, body .btn.btn-ghost {
  background-color: transparent; color: var(--c-heading); border-color: color-mix(in srgb, var(--c-heading) 35%, transparent);
}
body .elementor-widget-button.btn-ghost.btn-ghost.btn-ghost .elementor-button:is(:hover, :focus-visible), body .btn.btn-ghost:is(:hover, :focus-visible) {
  background-color: color-mix(in srgb, var(--c-heading) 8%, transparent); border-color: var(--c-heading); color: var(--c-heading);
}
body .elementor-widget-button.btn-light.btn-light.btn-light .elementor-button, body .btn.btn-light { background-color: #FFFFFF; border-color: #FFFFFF; color: var(--c-ink); }
body .elementor-widget-button.btn-light.btn-light.btn-light .elementor-button:is(:hover, :focus-visible), body .btn.btn-light:is(:hover, :focus-visible) { background-color: color-mix(in srgb, #FFFFFF 88%, var(--c-ink)); border-color: transparent; color: var(--c-ink); }
body .elementor-widget-button.btn-text.btn-text.btn-text .elementor-button, body .btn.btn-text {
  background: none; border-color: transparent; color: var(--c-heading); padding-inline: 0; min-height: 44px;
}
body .elementor-widget-button.btn-text.btn-text.btn-text .elementor-button::after, body .btn.btn-text::after { content: '→'; transition: transform .2s; }
body .elementor-widget-button.btn-text.btn-text.btn-text .elementor-button:is(:hover, :focus-visible), body .btn.btn-text:is(:hover, :focus-visible) { background: none; border-color: transparent; color: var(--c-heading); transform: none; }
body .elementor-widget-button.btn-text.btn-text.btn-text .elementor-button:hover::after, body .btn.btn-text:hover::after { transform: translateX(4px); }
body .elementor-widget-button.btn-full.btn-full .elementor-button, body .btn.btn-full { width: 100%; }

/* Images: put on an Image widget to crop it to a shape that holds at every screen size */
body :is(.ratio-1, .ratio-4-3, .ratio-3-2, .ratio-16-9, .ratio-3-4) img,
body img:is(.ratio-1, .ratio-4-3, .ratio-3-2, .ratio-16-9, .ratio-3-4) { width: 100%; height: auto; object-fit: cover; }
body .ratio-1 img, body img.ratio-1 { aspect-ratio: 1; }
body .ratio-4-3 img, body img.ratio-4-3 { aspect-ratio: 4 / 3; }
body .ratio-3-2 img, body img.ratio-3-2 { aspect-ratio: 3 / 2; }
body .ratio-16-9 img, body img.ratio-16-9 { aspect-ratio: 16 / 9; }
body .ratio-3-4 img, body img.ratio-3-4 { aspect-ratio: 3 / 4; }