/**
 * EKTIMO — Tailwind CSS source.
 *
 * Compiled to ../css/main.css via `npm run dev` (watch) or `npm run build` (minified).
 * The colour system lives in the :root custom properties below and is surfaced to Tailwind
 * through tailwind.config.js (colors reference these variables), so the whole theme shares
 * one palette that can be adjusted in a single place.
 */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/*
   * Guard against any element causing horizontal scroll on small screens.
   *
   * html alone is enough — it is the document's real scrolling box, so clipping overflow there
   * clips it everywhere. Setting overflow-x on body too used to seem harmless, but per spec an
   * element with only one overflow axis set to non-visible has its other axis computed as auto —
   * so body silently became its own scroll container. That is the classic reason
   * `position: sticky` stops sticking on a page: the browser sticks descendants to the nearest
   * scroll container, which was body, not the viewport.
   */

html {
  overflow-x: hidden;
}

body {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-surface) / var(--tw-bg-opacity, 1));
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

a {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.\!container {
  width: 100% !important;
  margin-right: auto !important;
  margin-left: auto !important;
  padding-right: 1.25rem !important;
  padding-left: 1.25rem !important;
}

.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.25rem;
  padding-left: 1.25rem;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
    padding-right: 2rem !important;
    padding-left: 2rem !important;
  }

  .container {
    max-width: 1024px;
    padding-right: 2rem;
    padding-left: 2rem;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

/* Centered content container. */

.ek-container, .ek-single-service .ek-section-two.ek-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1500px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 1024px) {
  .ek-container, .ek-single-service .ek-section-two.ek-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Section vertical rhythm — tighter on mobile, roomier on desktop. */

.ek-section {
  padding-top: 30px;
  padding-bottom: 30px;
}

@media (min-width: 640px) {
  .ek-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1024px) {
  .ek-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/*
   * Narrow section band.
   *
   * Used by the single templates (case study, sector/service) and the Content & CTA block for
   * the stacked bands that follow the main content. It was referenced in those templates but
   * never defined, so every band rendered with zero vertical padding and the sections ran
   * straight into each other.
   *
   * Slightly roomier than .ek-section because these bands alternate background colours, and
   * the colour change needs space around it to read as a separate section.
   */

.ek-section-n {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 640px) {
  .ek-section-n {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

@media (min-width: 1280px) {
  .ek-section-n {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

/* Small uppercase eyebrow label above headings. */

.ek-eyebrow {
  margin-bottom: 0.75rem;
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
}

/* Buttons. */

.ek-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ek-btn-primary:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ek-btn-primary:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--ek-primary) / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}


.ek-prose a.ek-btn-primary,
.ek-block-content a.ek-btn-primary {
  font-weight: 600;
  text-decoration: none;
}

.ek-btn-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-primary) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ek-btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-primary-hover) / var(--tw-bg-opacity, 1));
}

.ek-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ek-btn-outline:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ek-btn-outline:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--ek-primary) / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}


.ek-prose a.ek-btn-outline,
.ek-block-content a.ek-btn-outline {
  font-weight: 600;
  text-decoration: none;
}

.ek-btn-outline {
  border-width: 1px;
  border-color: rgb(255 255 255 / 0.7);
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ek-btn-outline:hover {
  background-color: rgb(255 255 255 / 0.1);
}

/* -------------------------------------------------------------------- *
   * Contact form fields. Styles inputs/textarea/submit inside .ek-form so
   * both the static placeholder form and any plugin form (CF7 / Gravity)
   * share a consistent, on-brand look.
   * -------------------------------------------------------------------- */

.ek-form input[type="text"],
  .ek-form input[type="email"],
  .ek-form input[type="tel"],
  .ek-form input[type="url"],
  .ek-form input[type="number"],
  .ek-form select,
  .ek-form textarea {
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--ek-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ek-form input[type="text"]:focus,
  .ek-form input[type="email"]:focus,
  .ek-form input[type="tel"]:focus,
  .ek-form input[type="url"]:focus,
  .ek-form input[type="number"]:focus,
  .ek-form select:focus,
  .ek-form textarea:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--ek-primary) / var(--tw-border-opacity, 1));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(var(--ek-primary) / 0.3);
}

.ek-form textarea {
  max-height: 80px;
  min-height: 80px;
  resize: vertical;
}

.ek-form p {
  margin-bottom: 0px;
}

/* Submit button — reuse the primary button style. */

.ek-form input[type="submit"],
  .ek-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ek-form input[type="submit"]:focus,
  .ek-form button[type="submit"]:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ek-form input[type="submit"]:focus-visible,
  .ek-form button[type="submit"]:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--ek-primary) / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}


.ek-prose a.ek-form input[type="submit"],
.ek-block-content a.ek-form input[type="submit"],
.ek-prose a
  .ek-form button[type="submit"],
.ek-block-content a
  .ek-form button[type="submit"] {
  font-weight: 600;
  text-decoration: none;
}

.ek-form input[type="submit"],
  .ek-form button[type="submit"] {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-primary) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ek-form input[type="submit"]:hover,
  .ek-form button[type="submit"]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-primary-hover) / var(--tw-bg-opacity, 1));
}

.ek-prose a.ek-form input[type="submit"],
.ek-block-content a.ek-form input[type="submit"],.ek-prose a
  .ek-form button[type="submit"],
.ek-block-content a
  .ek-form button[type="submit"] {
  font-weight: 600;
  text-decoration: none;
  color: #fff;
}

.ek-prose a.ek-form input[type="submit"]:hover,
.ek-block-content a.ek-form input[type="submit"]:hover,.ek-prose a
  .ek-form button[type="submit"]:hover,
.ek-block-content a
  .ek-form button[type="submit"]:hover {
  color: #fff;
  text-decoration: none;
}

.ek-form input[type="submit"],
  .ek-form button[type="submit"] {
  margin-top: 0.5rem;
  width: 100%;
  cursor: pointer;
  justify-content: center;
  border-width: 0px;
}

@media (max-width: 639px) {
  .ek-cs-cta .ek-form input[type="submit"],.ek-cs-cta 
  .ek-form button[type="submit"] {
    width: 100%;
    justify-content: center;
  }
}

.ek-form button[type="submit"][disabled] {
  cursor: default;
  opacity: 0.9;
}

/* Generic card. */

.ek-card {
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--ek-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 1.5rem;
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ek-card:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

/* -------------------------------------------------------------------- *
   * Horizontal card slider (Sectors block) — prev/next arrows over a
   * scroll-snap track. Behaviour is driven by sectors-slider.js.
   * -------------------------------------------------------------------- */

.ek-slider {
  position: relative;
}

/* Hide the raw scrollbar; navigation is via the arrow buttons + swipe. */

.ek-slider__track {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ek-slider__track::-webkit-scrollbar {
  display: none;
}

/*
   * Sectors track — left inset on narrow screens.
   *
   * The track sits outside .ek-container so cards bleed off the right edge, which also strips
   * the container's gutter from the LEFT edge: the first card rendered flush against the
   * viewport while the heading above it was indented by 20px.
   *
   * scroll-padding-left is the part that actually does the work, and padding-left alone cannot.
   * The track is `scroll-snap-type: x mandatory` with `scroll-snap-align: start` per card, so
   * the browser aligns the first card's edge with the start of the SNAPPORT. With no
   * scroll-padding the snapport starts at the scrollport edge, so the browser immediately
   * scrolls the track to scrollLeft = paddingLeft, cancelling the padding and putting the card
   * back at x=0. That is why sectors-slider.js already sets a matching padding via alignTrack()
   * and the gap still never appeared. Insetting the snapport by the same 20px makes the resting
   * snap position show the padding instead of scrolling past it.
   *
   * padding-left is kept as the no-JavaScript fallback; with JS active alignTrack() sets the
   * identical value inline, so the two never compound.
   *
   * max-width: 768px rather than Tailwind's `max-md:`. The md breakpoint is min-width: 768px,
   * so a Tailwind max-width variant stops one pixel short and the inset would vanish at exactly
   * 768px — the width this was reported at. Nothing applies from 769px up, so the desktop
   * full-bleed start is untouched.
   */

@media (max-width: 768px) {
  .ek-slider--sectors .ek-slider__track {
    padding-left: 20px;
    scroll-padding-left: 20px;
  }
}

/*
   * Prev/next arrow buttons.
   *
   * z-[11] uses Tailwind's arbitrary-value syntax, not `z-11`: the default z-index scale only
   * defines 0/10/20/30/40/50, so a bare `z-11` fails the build with "The `z-11` class does not
   * exist". The value sits one above the z-10 used by sibling content so the arrows stay
   * clickable over it.
   */

.ek-slider__nav {
  position: absolute;
  top: 50%;
  z-index: 11;
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--ek-navy) / var(--tw-text-opacity, 1));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ek-slider__nav:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-primary) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ek-slider__nav--prev {
  left: 0.5rem;
}

@media (min-width: 1024px) {
  .ek-slider__nav--prev {
    left: 1.25rem;
  }
}

.ek-slider__nav--next {
  right: 0.5rem;
}

@media (min-width: 1024px) {
  .ek-slider__nav--next {
    right: 1.25rem;
  }
}

/*
   * Arrow disabled state — hidden, not dimmed.
   *
   * A disabled arrow is removed from view entirely. It was previously left at
   * opacity: 0.35 with pointer-events: none, which read as "an arrow that is
   * there but broken": on the first slide the back arrow was clearly visible
   * yet did nothing when clicked.
   *
   * visibility rather than display:none, so the button keeps its box and the
   * arrows never shift position as the state flips. Both buttons are absolutely
   * positioned, so hiding one cannot move the other either way.
   *
   * The prev button ships with the disabled attribute AND .disabled class (see
   * includes/blocks/sectors/render.php), so it is correctly hidden on the first
   * slide before JavaScript runs. updateArrows() in
   * assets/js/modules/sectors-slider.js then toggles both on every scroll,
   * swipe, click and resize — which is what reveals the back arrow as soon as
   * the track moves off the start, and hides it again on return.
   *
   * We deliberately avoid the old "opacity on --prev, overridden via
   * .is-scrolled" pattern: both selectors had the same specificity (0,3,0) as
   * the disabled rule, making source-order wins unpredictable on fast devices.
   */

.ek-slider__nav.disabled,
  .ek-slider__nav:disabled {
  visibility: hidden;
  opacity: 0;
  cursor: default;
  pointer-events: none;
}

/* When the track doesn't overflow, hide the controls entirely. */

.ek-slider.is-static .ek-slider__nav {
  display: none;
}

/* -------------------------------------------------------------------- *
   * Hero slider (EKTIMO Hero block) — one full-width slide at a time on a
   * scroll-snap track, with the prev/next arrows stacked vertically against
   * the right edge. Behaviour is driven by assets/js/modules/hero-slider.js.
   *
   * This is intentionally a separate namespace from .ek-slider above: that
   * one positions its arrows left/right of a multi-card track, whereas the
   * hero needs both arrows in a single vertical stack on the right. Reusing
   * .ek-slider__nav would have meant overriding its left/right/translate
   * utilities, so the hero gets its own small set of classes and the Sectors
   * slider is left untouched.
   * -------------------------------------------------------------------- */

.ek-hero-slider {
  position: relative;
  display: flex;
  width: 100%;
}

/*
   * The track scrolls horizontally one slide per "page". Scroll-snap gives the
   * native swipe on touch devices for free, and scroll-smooth makes both the
   * arrow clicks and the autoplay advance animate rather than jump.
   */

.ek-hero-slider__track {
  display: flex;
  width: 100%;
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
  --tw-scroll-snap-strictness: mandatory;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ek-hero-slider__track::-webkit-scrollbar {
  display: none;
}

.ek-hero-slider__slide {
  display: flex;
  width: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
}

/*
   * Arrow stack — pinned to the right edge, vertically centred. The group is
   * the positioned element so both buttons keep a fixed gap at every
   * breakpoint. It tucks in closer on small screens, where the slide content
   * also gains right padding (see render.php) so the heading never runs
   * underneath the buttons.
   */

.ek-hero-slider__nav-group {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  z-index: 11;
  display: flex;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  flex-direction: column;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .ek-hero-slider__nav-group {
    right: 1.25rem;
  }
}

@media (min-width: 1024px) {
  .ek-hero-slider__nav-group {
    right: 2rem;
  }
}

.ek-hero-slider__nav {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.9);
  --tw-text-opacity: 1;
  color: rgb(var(--ek-navy) / var(--tw-text-opacity, 1));
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (min-width: 640px) {
  .ek-hero-slider__nav {
    height: 2.75rem;
    width: 2.75rem;
  }
}

.ek-hero-slider__nav:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-primary) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ek-hero-slider__nav:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: rgb(var(--ek-navy) / 1);
}

/*
   * The shared arrow glyph points right at rest, which is already the "next"
   * direction, so only the prev button flips it. The buttons stay stacked
   * vertically on the right edge; the arrows themselves point left and right
   * to match the horizontal movement of the track.
   */

.ek-hero-slider__nav--prev svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

/*
   * Single slide: no controls, and the track must not scroll at all — without
   * this a one-slide hero could still be nudged sideways by a trackpad.
   */

.ek-hero-slider.is-static .ek-hero-slider__nav-group {
  display: none;
}

.ek-hero-slider.is-static .ek-hero-slider__track {
  overflow-x: hidden;
}

/* -------------------------------------------------------------------- *
   * Long-form content (post_content / the_content) styling.
   * A lightweight typography scale so editor content reads well without the
   * @tailwindcss/typography plugin dependency.
   * -------------------------------------------------------------------- */

.ek-prose {
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink-muted) / var(--tw-text-opacity, 1));
}

.ek-prose > * + * {
  margin-top: 1.25rem;
}

.ek-prose h2 {
  margin-top: 2.5rem;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

.ek-prose h3 {
  margin-top: 2rem;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

.ek-prose p {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink-muted) / var(--tw-text-opacity, 1));
}

.ek-prose a {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
  text-underline-offset: 2px;
}

.ek-prose a:hover {
  text-decoration-line: underline;
}

/*
 * Buttons inside body-copy regions keep their own colours.
 *
 * Both .ek-prose a and .ek-block-content a paint links in the primary blue for readable body
 * copy, and both are declared later in the sheet than .ek-btn-primary's colour — so they also
 * repaint any button that sits inside those regions, giving primary-blue text on a
 * primary-blue pill, i.e. an invisible label. Restoring the button colours here keeps both
 * behaviours correct.
 *
 * Every wrapper that styles descendant links must be listed: covering only one of them leaves
 * the same bug in the other.
 */

.ek-prose a.ek-btn-primary,
.ek-prose a.ek-btn-outline,
.ek-prose a.ek-btn-ghost,
.ek-prose a.ek-btn,
.ek-block-content a.ek-btn-primary,
.ek-block-content a.ek-btn-outline,
.ek-block-content a.ek-btn-ghost,
.ek-block-content a.ek-btn {
  font-weight: 600;
  text-decoration: none;
}

.ek-prose a.ek-btn-primary,
.ek-block-content a.ek-btn-primary {
  color: #fff !important;
}

.ek-prose a.ek-btn-primary:hover,
.ek-block-content a.ek-btn-primary:hover {
  color: #fff !important;
  text-decoration: none;
}

.ek-prose ul {
  list-style-type: disc;
}

.ek-prose ul > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.ek-prose ul {
  padding-left: 1.5rem;
}

.ek-prose ol {
  list-style-type: decimal;
}

.ek-prose ol > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.ek-prose ol {
  padding-left: 1.5rem;
}

.ek-prose img {
  border-radius: 0.75rem;
}

.ek-prose strong {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

/* -------------------------------------------------------------------- *
   * Mixed block content (single/detail templates).
   *
   * When a post uses EKTIMO section blocks, the_content() renders without a
   * prose wrapper so those sections can span the full width. Core blocks
   * authored alongside them — paragraphs, headings, lists, quotes — would
   * then sit edge-to-edge with no styling.
   *
   * These rules give core blocks the container width and the same typography
   * as .ek-prose, while EKTIMO's own <section> elements are left untouched
   * and stay full-bleed. Only direct children are targeted, so text inside a
   * section block keeps that block's own styling.
   * -------------------------------------------------------------------- */

.ek-block-content > p,
  .ek-block-content > h1,
  .ek-block-content > h2,
  .ek-block-content > h3,
  .ek-block-content > h4,
  .ek-block-content > h5,
  .ek-block-content > h6,
  .ek-block-content > ul,
  .ek-block-content > ol,
  .ek-block-content > blockquote,
  .ek-block-content > figure,
  .ek-block-content > table,
  .ek-block-content > pre,
  .ek-block-content > hr,
  .ek-block-content > .wp-block-image,
  .ek-block-content > .wp-block-embed,
  .ek-block-content > .wp-block-buttons,
  .ek-block-content > .wp-block-columns,
  .ek-block-content > .wp-block-group,
  .ek-block-content > .wp-block-media-text,
  .ek-block-content > .wp-block-cover,
  .ek-block-content > .wp-block-gallery,
  .ek-block-content > .wp-block-separator,
  .ek-block-content > .wp-block-quote,
  .ek-block-content > .wp-block-details,
  .ek-block-content > .wp-block-table {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 1280px;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

@media (min-width: 1024px) {
  .ek-block-content > p,
  .ek-block-content > h1,
  .ek-block-content > h2,
  .ek-block-content > h3,
  .ek-block-content > h4,
  .ek-block-content > h5,
  .ek-block-content > h6,
  .ek-block-content > ul,
  .ek-block-content > ol,
  .ek-block-content > blockquote,
  .ek-block-content > figure,
  .ek-block-content > table,
  .ek-block-content > pre,
  .ek-block-content > hr,
  .ek-block-content > .wp-block-image,
  .ek-block-content > .wp-block-embed,
  .ek-block-content > .wp-block-buttons,
  .ek-block-content > .wp-block-columns,
  .ek-block-content > .wp-block-group,
  .ek-block-content > .wp-block-media-text,
  .ek-block-content > .wp-block-cover,
  .ek-block-content > .wp-block-gallery,
  .ek-block-content > .wp-block-separator,
  .ek-block-content > .wp-block-quote,
  .ek-block-content > .wp-block-details,
  .ek-block-content > .wp-block-table {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Vertical rhythm between consecutive core blocks. */

.ek-block-content > * + * {
  margin-top: 1.25rem;
}

/* Body copy — matches .ek-prose. */

.ek-block-content > p,
  .ek-block-content > ul,
  .ek-block-content > ol,
  .ek-block-content > blockquote {
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink-muted) / var(--tw-text-opacity, 1));
}

.ek-block-content > h1,
  .ek-block-content > h2 {
  margin-top: 2.5rem;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

.ek-block-content > h3,
  .ek-block-content > h4 {
  margin-top: 2rem;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

.ek-block-content > h5,
  .ek-block-content > h6 {
  margin-top: 1.5rem;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

.ek-block-content > ul {
  list-style-type: disc;
}

.ek-block-content > ul > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.ek-block-content > ul {
  padding-left: 1.5rem;
}

.ek-block-content > ol {
  list-style-type: decimal;
}

.ek-block-content > ol > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.ek-block-content > ol {
  padding-left: 1.5rem;
}

/* Lists need the container padding plus their own indent. */

.ek-block-content > ul,
  .ek-block-content > ol {
  padding-left: 2.75rem;
}

@media (min-width: 1024px) {
  .ek-block-content > ul,
  .ek-block-content > ol {
    padding-left: 3.5rem;
  }
}

.ek-block-content > blockquote {
  border-left-width: 4px;
  border-color: rgb(var(--ek-primary) / 0.4);
  padding-left: 1.5rem;
  font-style: italic;
}

.ek-block-content a {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
  text-underline-offset: 2px;
}

.ek-block-content strong {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

.ek-block-content > figure img,
  .ek-block-content > .wp-block-image img {
  border-radius: 0.75rem;
}

/* -------------------------------------------------------------------- *
   * Core layout blocks (Columns, Group, Media & Text).
   *
   * The container rule above gives these blocks the page width; these rules
   * style the text inside them, which the direct-child selectors cannot
   * reach. Without this, a Columns block renders with browser-default
   * typography while everything around it uses the theme scale.
   * -------------------------------------------------------------------- */

.ek-block-content .wp-block-column > h1,
  .ek-block-content .wp-block-column > h2,
  .ek-block-content .wp-block-column > h3,
  .ek-block-content .wp-block-column > h4,
  .ek-block-content .wp-block-column > h5,
  .ek-block-content .wp-block-column > h6,
  .ek-block-content .wp-block-group > h1,
  .ek-block-content .wp-block-group > h2,
  .ek-block-content .wp-block-group > h3,
  .ek-block-content .wp-block-group > h4 {
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-navy) / var(--tw-text-opacity, 1));
}

.ek-block-content .wp-block-column > h2,
  .ek-block-content .wp-block-group > h2 {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

@media (min-width: 1024px) {
  .ek-block-content .wp-block-column > h2,
  .ek-block-content .wp-block-group > h2 {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

.ek-block-content .wp-block-column > h3,
  .ek-block-content .wp-block-group > h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

@media (min-width: 1024px) {
  .ek-block-content .wp-block-column > h3,
  .ek-block-content .wp-block-group > h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

.ek-block-content .wp-block-column > h4,
  .ek-block-content .wp-block-column > h5,
  .ek-block-content .wp-block-column > h6,
  .ek-block-content .wp-block-group > h4 {
  font-size: 1rem;
  line-height: 1.5rem;
}

@media (min-width: 1024px) {
  .ek-block-content .wp-block-column > h4,
  .ek-block-content .wp-block-column > h5,
  .ek-block-content .wp-block-column > h6,
  .ek-block-content .wp-block-group > h4 {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.ek-block-content .wp-block-column > p,
  .ek-block-content .wp-block-group > p,
  .ek-block-content .wp-block-media-text__content > p {
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink-muted) / var(--tw-text-opacity, 1));
}

.ek-block-content .wp-block-column > ul > :not([hidden]) ~ :not([hidden]),
  .ek-block-content .wp-block-column > ol > :not([hidden]) ~ :not([hidden]),
  .ek-block-content .wp-block-group > ul > :not([hidden]) ~ :not([hidden]),
  .ek-block-content .wp-block-group > ol > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.ek-block-content .wp-block-column > ul,
  .ek-block-content .wp-block-column > ol,
  .ek-block-content .wp-block-group > ul,
  .ek-block-content .wp-block-group > ol {
  padding-left: 1.5rem;
  font-size: 1rem;
  line-height: 1.5rem;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink-muted) / var(--tw-text-opacity, 1));
}

.ek-block-content .wp-block-column > ul {
  list-style-type: disc;
}

.ek-block-content .wp-block-column > ol {
  list-style-type: decimal;
}

/* Spacing between stacked items inside a column. */

.ek-block-content .wp-block-column > * + *,
  .ek-block-content .wp-block-group > * + * {
  margin-top: 1rem;
}

/*
   * Column gap. Core's own layout styles set a flex gap, but a theme-consistent
   * value keeps columns aligned with the rest of the grid spacing.
   */

.ek-block-content .wp-block-columns {
  gap: 2rem;
}

@media (min-width: 1024px) {
  .ek-block-content .wp-block-columns {
    gap: 3rem;
  }
}

/* Stack columns on mobile — core handles this, but only above 782px. */

@media (max-width: 781px) {
  .ek-block-content .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-direction: column;
  }
}

/*
   * Breathing room where core text meets a full-width EKTIMO section. A section
   * carries its own ek-section padding, so only the text side needs spacing —
   * added to whichever core block directly follows a section, and to the last
   * core block before the template's next section.
   */

.ek-block-content > section + p,
  .ek-block-content > section + h1,
  .ek-block-content > section + h2,
  .ek-block-content > section + h3,
  .ek-block-content > section + h4,
  .ek-block-content > section + ul,
  .ek-block-content > section + ol,
  .ek-block-content > section + .wp-block-columns,
  .ek-block-content > section + .wp-block-group,
  .ek-block-content > section + .wp-block-media-text,
  .ek-block-content > section + .wp-block-gallery,
  .ek-block-content > section + .wp-block-image {
  margin-top: 0px;
  padding-top: 3rem;
}

@media (min-width: 1024px) {
  .ek-block-content > section + p,
  .ek-block-content > section + h1,
  .ek-block-content > section + h2,
  .ek-block-content > section + h3,
  .ek-block-content > section + h4,
  .ek-block-content > section + ul,
  .ek-block-content > section + ol,
  .ek-block-content > section + .wp-block-columns,
  .ek-block-content > section + .wp-block-group,
  .ek-block-content > section + .wp-block-media-text,
  .ek-block-content > section + .wp-block-gallery,
  .ek-block-content > section + .wp-block-image {
    padding-top: 4rem;
  }
}

.ek-block-content > :last-child:not(section) {
  padding-bottom: 3rem;
}

@media (min-width: 1024px) {
  .ek-block-content > :last-child:not(section) {
    padding-bottom: 4rem;
  }
}

.ek-block-content > :first-child:not(section) {
  padding-top: 3rem;
}

@media (min-width: 1024px) {
  .ek-block-content > :first-child:not(section) {
    padding-top: 4rem;
  }
}

/* -------------------------------------------------------------------- *
   * Contact Panel block.
   *
   * A full-width blue gradient band holding contact details and a form. The
   * form itself is produced by whichever plugin the editor chose (CF7,
   * Gravity Forms, WPForms …), so these rules restyle the fields generically
   * — by input type rather than by any plugin's class names — to give every
   * form the same outlined-on-blue look.
   * -------------------------------------------------------------------- */

/*
   * Standard theme surface and ink, so the panel sits in the page like every
   * other section rather than as a coloured band.
   */

.ek-contact-panel {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-surface) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

.ek-contact-panel h2 {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-navy) / var(--tw-text-opacity, 1));
}

.ek-contact-panel__intro a {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
  text-underline-offset: 2px;
}

.ek-contact-panel__intro a:hover {
  text-decoration-line: underline;
}

.ek-contact-panel__intro p + p {
  margin-top: 0.75rem;
}

/*
   * Two-column field grid on desktop: the plugin emits a flat list of fields,
   * so the grid is applied to the form element and wide fields opt out below.
   */

.ek-contact-panel__form form {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .ek-contact-panel__form form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
  }
}

.ek-contact-panel__form p {
  margin-bottom: 0px;
}

/* Fields — white with the theme's hairline border, matching .ek-form. */

.ek-contact-panel__form input[type='text'],
  .ek-contact-panel__form input[type='email'],
  .ek-contact-panel__form input[type='tel'],
  .ek-contact-panel__form input[type='url'],
  .ek-contact-panel__form input[type='number'],
  .ek-contact-panel__form input[type='date'],
  .ek-contact-panel__form select,
  .ek-contact-panel__form textarea {
  width: 100%;
  border-radius: 0.5rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--ek-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ek-contact-panel__form input::-moz-placeholder, .ek-contact-panel__form textarea::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink-muted) / var(--tw-text-opacity, 1));
}

.ek-contact-panel__form input::placeholder,
  .ek-contact-panel__form textarea::placeholder {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink-muted) / var(--tw-text-opacity, 1));
}

.ek-contact-panel__form input:focus,
  .ek-contact-panel__form select:focus,
  .ek-contact-panel__form textarea:focus {
  --tw-border-opacity: 1;
  border-color: rgb(var(--ek-primary) / var(--tw-border-opacity, 1));
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-color: rgb(var(--ek-primary) / 0.4);
}

/* Custom chevron so the control matches across browsers. Muted ink to suit
     the light field. */

.ek-contact-panel__form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6C76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
}

/* Dropdown options render on the OS surface, so they need dark-on-light. */

.ek-contact-panel__form select option {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

.ek-contact-panel__form textarea {
  min-height: 220px;
  resize: vertical;
}

/*
   * Full-width rows.
   *
   * CF7 and Gravity Forms wrap each field in a <p> or <div>, so that wrapper —
   * not the field — is the grid item. :has() lets a wrapper span both columns
   * based on the control inside it. The bare-element selectors after it cover
   * forms that place controls directly in the grid.
   */

@media (min-width: 640px) {
  .ek-contact-panel__form form > p:has(textarea),
  .ek-contact-panel__form form > p:has(input[type='submit']),
  .ek-contact-panel__form form > p:has(.wpcf7-radio),
  .ek-contact-panel__form form > p:has(.wpcf7-checkbox),
  .ek-contact-panel__form form > p:has(.wpcf7-acceptance),
  .ek-contact-panel__form form > div:has(textarea),
  .ek-contact-panel__form form > .ek-full,
  .ek-contact-panel__form textarea,
  .ek-contact-panel__form .ek-full,
  .ek-contact-panel__form .wpcf7-radio,
  .ek-contact-panel__form input[type='submit'],
  .ek-contact-panel__form button[type='submit'] {
    grid-column: span 2 / span 2;
  }
}

/*
   * A wrapper <p> holding a submit button should not stretch it; keep the
   * button its natural width, aligned right.
   */

.ek-contact-panel__form form > p:has(input[type='submit']) {
  display: flex;
  justify-content: flex-end;
}

/* CF7 labels wrap their field, so the label must fill its grid cell. */

.ek-contact-panel__form label {
  width: 100%;
}

/* Radio / checkbox rows. */

.ek-contact-panel__form .wpcf7-radio,
  .ek-contact-panel__form .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
  row-gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

.ek-contact-panel__form .wpcf7-list-item {
  margin: 0px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ek-contact-panel__form input[type='radio'],
  .ek-contact-panel__form input[type='checkbox'] {
  height: 1rem;
  width: 1rem;
  accent-color: rgb(var(--ek-primary) / 1);
}

/* Labels sitting outside fields (e.g. "How would you like to be contacted?"). */

.ek-contact-panel__form label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

/* Submit — the theme's primary pill, right-aligned. */

.ek-contact-panel__form input[type='submit'],
  .ek-contact-panel__form button[type='submit'] {
  margin-left: auto;
  width: auto;
  cursor: pointer;
  border-radius: 9999px;
  border-width: 0px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-primary) / var(--tw-bg-opacity, 1));
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ek-contact-panel__form input[type='submit']:hover,
  .ek-contact-panel__form button[type='submit']:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-primary-hover) / var(--tw-bg-opacity, 1));
}

/* Plugin validation messages. */

.ek-contact-panel__form .wpcf7-not-valid-tip {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(179 38 30 / var(--tw-text-opacity, 1));
}

.ek-contact-panel__form .wpcf7-response-output {
  margin-top: 0.5rem;
  border-radius: 0.375rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--ek-line) / var(--tw-border-opacity, 1));
  padding: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .ek-contact-panel__form .wpcf7-response-output {
    grid-column: span 2 / span 2;
  }
}

.ek-contact-panel__form .wpcf7-spinner {
  vertical-align: middle;
}

/* -------------------------------------------------------------------- *
   * Tabs (Tabs block).
   *
   * A row of labels sitting on a full-bleed navy rule, with the active tab
   * marked by a thicker primary-blue underline that overlaps that rule. The
   * panel below is a full-width tinted band.
   *
   * Native <button role="tab"> elements, so keyboard support comes from the
   * platform; tabs.js adds arrow-key roving focus. Without JavaScript every
   * panel renders stacked (see .ek-tabs__panel below), so nothing is hidden.
   * -------------------------------------------------------------------- */

.ek-tabs__bar {
  position: relative;
}

/* The full-bleed rule the tabs sit on. */

.ek-tabs__bar .ek-tabs__panel-body::after {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ek-tabs__bar::after {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 3px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-navy) / var(--tw-bg-opacity, 1));
  --tw-content: '';
  content: var(--tw-content);
}

.ek-tabs__list {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 2rem;
       column-gap: 2rem;
  row-gap: 0.5rem;
  overflow-x: auto;
  padding-top: 1.5rem;
}

@media (min-width: 640px) {
  .ek-tabs__list {
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }
}

@media (min-width: 1024px) {
  .ek-tabs__list {
    -moz-column-gap: 4rem;
         column-gap: 4rem;
  }
}

.ek-tabs__list {
  scrollbar-width: none;
}

.ek-tabs__list::-webkit-scrollbar {
  display: none;
}

.ek-tabs__tab {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  border-width: 0px;
  background-color: transparent;
  padding-bottom: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-navy) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@media (min-width: 1024px) {
  .ek-tabs__tab {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

.ek-tabs__tab:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
}

.ek-tabs__tab:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--ek-primary) / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}

/*
   * Active underline. Sits 3px tall at the bottom so it covers the navy rule
   * behind it, matching the design where the blue segment interrupts the line.
   */

.ek-tabs__tab::after {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 0px;
  height: 3px;
  --tw-scale-x: 0;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-primary) / var(--tw-bg-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  --tw-content: '';
  content: var(--tw-content);
}

.ek-tabs__tab[aria-selected='true'] {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
}

.ek-tabs__tab[aria-selected='true']::after {
  --tw-scale-x: 1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ek-tabs__panels {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 1024px) {
  .ek-tabs__panels {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

.ek-tabs__panel {
  margin-left: auto;
  margin-right: auto;
  max-width: 56rem;
}

.ek-tabs__panel:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ek-tabs__panel-eyebrow {
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
}

/*
   * Panel copy is set large — in the design the tab body reads as a statement
   * rather than body text.
   */

.ek-tabs__panel-body {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  line-height: 1.375;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-navy) / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .ek-tabs__panel-body {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .ek-tabs__panel-body {
    font-size: 28px;
    line-height: 1.35;
  }
}

.ek-tabs__panel-body p + p {
  margin-top: 1rem;
}

/* On a navy panel the copy inverts. */

.bg-navy .ek-tabs__panel-body {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/*
   * No JavaScript: reveal every panel and drop the [hidden] attribute the
   * markup ships with, so all content stays reachable.
   */

.no-js .ek-tabs__panel[hidden] {
  display: block;
}

.no-js .ek-tabs__panel + .ek-tabs__panel {
  margin-top: 2.5rem;
  border-top-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--ek-line) / var(--tw-border-opacity, 1));
  padding-top: 2.5rem;
}

/* -------------------------------------------------------------------- *
   * FAQ accordion (FAQs block).
   *
   * Built on native <details>/<summary>, so it works without JavaScript and
   * is keyboard accessible out of the box. faqs.js only adds the optional
   * "one open at a time" behaviour.
   *
   * In two-column mode the wrapper uses CSS multi-columns, so break-inside
   * must be guarded to stop an item splitting across the column boundary.
   * -------------------------------------------------------------------- */

.ek-faq {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  border-bottom-width: 1px;
  border-color: rgb(var(--ek-line) / 0.7);
}

/*
   * An OPEN answer may break across columns.
   *
   * break-inside-avoid keeps a closed question with its neighbours, which is what the design
   * wants. But an expanded answer can be far taller than a column — the long analyte lists run
   * to dozens of items — and refusing to break makes it overflow the column instead of
   * flowing on. Allowing a break only while open keeps both behaviours right.
   */

/* Long unbroken strings (chemical names, file names) wrap instead of overflowing. */

.ek-faq__q,
  .ek-faq__a {
  overflow-wrap: break-word;
}

/* The row: question left, circular +/- indicator right. */

.ek-faq__q {
  display: flex;
  cursor: pointer;
  list-style-type: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ek-faq__q:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
}

/* Hide the native disclosure triangle (WebKit needs its own selector). */

.ek-faq__q::-webkit-details-marker {
  display: none;
}

.ek-faq__q::marker {
  content: '';
}

.ek-faq__q:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(var(--ek-primary) / var(--tw-ring-opacity, 1));
  --tw-ring-offset-width: 2px;
}

.ek-faq__text {
  min-width: 0px;
}

.ek-faq__icon {
  display: flex;
  height: 1.5rem;
  width: 1.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-primary) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ek-faq__icon svg {
  height: 0.75rem;
  width: 0.75rem;
}

/*
   * Plus turns into minus when open: drop the vertical stroke of the icon.
   * The horizontal stroke stays, giving a clean minus with no extra markup.
   */

.ek-faq[open] .ek-faq__icon-v {
  opacity: 0;
}

.ek-faq__a {
  padding-bottom: 1rem;
  padding-right: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  line-height: 1.625;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink-muted) / var(--tw-text-opacity, 1));
}

.ek-faq__a p {
  margin-bottom: 0.75rem;
}

.ek-faq__a p:last-child {
  margin-bottom: 0px;
}

/*
   * Lists inside a FAQ answer.
   *
   * Tailwind's preflight strips list-style and padding from ul/ol, so an answer authored as a
   * bulleted list in the WYSIWYG rendered as unmarked plain text. These rules restore the
   * markers and indent.
   */

.ek-faq__a ul,
  .ek-faq__a ol {
  margin-bottom: 0.75rem;
}

.ek-faq__a ul > :not([hidden]) ~ :not([hidden]),
  .ek-faq__a ol > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.ek-faq__a ul,
  .ek-faq__a ol {
  padding-left: 1.25rem;
}

.ek-faq__a ul:last-child,
  .ek-faq__a ol:last-child {
  margin-bottom: 0px;
}

.ek-faq__a ul {
  list-style-type: disc;
}

.ek-faq__a ol {
  list-style-type: decimal;
}

/*
   * A long list flows into its own inner columns from lg up — but only once it is long
   * enough to warrant it.
   *
   * These lists can run to dozens of short items, which would otherwise be one very tall
   * single column. The columns belong to the list itself, so the question keeps its place in
   * the parent's accordion — deliberately NOT column-span, which would break the open
   * question out to the full page width and away from its neighbour.
   *
   * The threshold is expressed with :has(> li:nth-child(21)): the rule matches only when a
   * 21st list item exists, so 20 or fewer items stay in a single column and 21+ split into
   * two. This was previously unconditional, which split even four-item lists across the full
   * width and left an obvious gap between the pairs.
   *
   * CSS cannot count children directly, so testing for the existence of the item at the
   * threshold index is the standard way to express "more than N". The child combinator is
   * required — a descendant match would also count items inside nested lists.
   */

@media (min-width: 1024px) {
  .ek-faq__a ul:has(> li:nth-child(21)),
    .ek-faq__a ol:has(> li:nth-child(21)) {
    -moz-columns: 2;
         columns: 2;
    -moz-column-gap: 1.5rem;
         column-gap: 1.5rem;
  }
}

.ek-faq__a li {
  padding-left: 0.25rem;
  /* Keep a marker and its text together when the list breaks across columns. */
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.ek-faq__a li::marker {
  color: rgb(var(--ek-primary));
}

.ek-faq__a a {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
  text-underline-offset: 2px;
}

.ek-faq__a a:hover {
  text-decoration-line: underline;
}

.ek-faq__a strong {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

/* Closing note under the questions. WYSIWYG, so links get the brand treatment. */

.ek-faqs__footer p {
  margin-bottom: 0.75rem;
}

.ek-faqs__footer p:last-child {
  margin-bottom: 0px;
}

.ek-faqs__footer a {
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
  text-underline-offset: 2px;
}

.ek-faqs__footer a:hover {
  text-decoration-line: underline;
}

.ek-faq__q:hover h3 {
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
}

/* -------------------------------------------------------------------- *
   * Inner-page hero band.
   *
   * The tall dark banner that opens service/sector details, category
   * listings and the Sectors & Services archive. Sized generously so the
   * banner reads as a proper hero rather than a thin strip.
   *
   * The site header overlays this band (see .ek-header--overlay), so the
   * top padding must clear the header — roughly the 36px utility bar plus
   * the 80px nav row, with breathing room beneath. Content is vertically
   * centred in the remaining space.
   * -------------------------------------------------------------------- */

.ek-page-hero .ek-tabs__panel-body {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ek-page-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 180px;
  align-items: center;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-navy) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink-invert) / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .ek-page-hero {
    min-height: 440px;
  }
}

@media (min-width: 1024px) {
  .ek-page-hero {
    min-height: 320px;
  }
}

/*
   * Top padding only needs to clear the header where the header overlays the
   * band — i.e. from lg up. Below that the header is solid and in the normal
   * flow, so the hero uses even padding and does not open a gap under the bar.
   */

.ek-page-hero__inner {
  width: 100%;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 640px) {
  .ek-page-hero__inner {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}

@media (min-width: 1024px) {
  .ek-page-hero__inner {
    padding-bottom: 5rem;
    padding-top: 10rem;
  }
}

/* 404 page — thin dark header band + light body section. */

.ek-404-hero-band .ek-page-hero__inner {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

@media (min-width: 1024px) {
  .ek-404-hero-band .ek-page-hero__inner {
    padding-bottom: 3rem;
    padding-top: 8rem;
  }
}

.ek-404-body {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 640px) {
  .ek-404-body {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.ek-404-code {
  display: block;
  font-size: 120px;
  font-weight: 800;
  line-height: 1;
}

@media (min-width: 640px) {
  .ek-404-code {
    font-size: 160px;
  }
}

@media (min-width: 1024px) {
  .ek-404-code {
    font-size: 200px;
  }
}

.ek-404-code {
  color: rgb(var(--ek-primary) / 0.9);
}

/* -------------------------------------------------------------------- *
   * Breadcrumb — Home / [Current Page Title].
   *
   * Markup comes from ektimo_the_breadcrumb() (includes/breadcrumbs.php): a
   * semantic <nav> > <ol> > <li> trail with BreadcrumbList microdata. Styled
   * for the dark hero band, where every trail currently sits.
   *
   * .ek-breadcrumb-center is retained as a no-op alias: it wrapped the old
   * flex <nav> to centre it, and any template or cached markup still using it
   * must not break. The <ol> centres itself now.
   * -------------------------------------------------------------------- */

.ek-breadcrumb {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(255 255 255 / 0.7);
}

.ek-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  row-gap: 0.25rem;
}

.ek-breadcrumb__link {
  color: rgb(255 255 255 / 0.7);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

#colophon a.ek-breadcrumb__link:hover {
  --tw-text-opacity: 1;
  color: #3ba9e0;
}

.ek-breadcrumb__link:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ek-breadcrumb__link:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ek-breadcrumb__current {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ek-breadcrumb__sep {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: rgb(255 255 255 / 0.4);
}

/* -------------------------------------------------------------------- *
   * Site header.
   *
   * Two modes, chosen per-request by ektimo_header_is_overlay():
   *
   *   Solid   — default. Navy bar in the normal document flow.
   *   Overlay — on pages that open with a hero. The header is positioned
   *             over the hero image (transparent, no background) and turns
   *             solid navy once scrolled, so the nav stays readable over the
   *             light content below. The .is-scrolled class is toggled by
   *             assets/js/modules/header-scroll.js.
   *
   * The transition covers background and shadow only, so no layout shifts.
   * -------------------------------------------------------------------- */

.ek-header {
  transition-property: background-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/*
   * Mobile and tablet: the header is a solid navy bar in the normal flow. The
   * transparent overlay is a desktop treatment only — on a small screen the
   * hero is short, the nav sits directly over the busiest part of the image,
   * and an open menu drawer needs an opaque bar behind it.
   *
   * The overlay styling below is therefore scoped to lg and up; the classes
   * PHP adds for positioning (absolute inset-x-0 top-0) are neutralised here
   * so the header stays in flow on small screens.
   */

.ek-header--overlay .ek-tabs__panel-body {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ek-header--overlay {
  position: relative;
  z-index: 40;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-navy) / var(--tw-bg-opacity, 1));
}

@media (min-width: 1024px) {
  .ek-header--overlay {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    background-color: transparent;
  }

  /* Scrolled state: solid navy, subtle lift. Overlay header only. */

  .ek-header--overlay.is-scrolled .ek-tabs__panel-body {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  }

  .ek-header--overlay.is-scrolled {
    position: fixed;
    --tw-bg-opacity: 1;
    background-color: rgb(var(--ek-navy) / var(--tw-bg-opacity, 1));
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  }

  /*
     * The top utility bar keeps its own solid dark band even while the nav row
     * below is transparent — that is how the approved design reads: a distinct
     * strip at the very top, with only the logo/nav row floating over the hero.
     *
     * Once scrolled the whole header is solid navy, so the strip no longer
     * needs its own background and blends into the bar.
     */

  .ek-header--overlay .ek-header__topbar {
    border-color: rgb(255 255 255 / 0.1);
    background-color: rgb(0 0 0 / 0.7);
  }

  .ek-header--overlay.is-scrolled .ek-header__topbar {
    background-color: transparent;
  }
}

/*
   * When JavaScript is unavailable the overlay header can never turn solid on scroll. Fall
   * back to the solid in-flow bar at every width so the navigation is always legible. Declared
   * after the lg block above so it wins there too.
   */

.no-js .ek-header--overlay .ek-tabs__panel-body,
  .no-js .ek-header--overlay.is-scrolled .ek-tabs__panel-body {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.no-js .ek-header--overlay,
  .no-js .ek-header--overlay.is-scrolled {
  position: relative;
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-navy) / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.no-js .ek-header--overlay .ek-header__topbar {
  background-color: transparent;
}

/* -------------------------------------------------------------------- *
   * Primary navigation with hover/focus dropdowns.
   * Styles WordPress's default menu markup (.ek-menu > li, .sub-menu,
   * .menu-item-has-children). CSS-only: sub-menus are hidden until the
   * parent is hovered or receives keyboard focus (:focus-within), so no
   * JavaScript is required and keyboard users are supported.
   * -------------------------------------------------------------------- */

/* Top-level row. */

.ek-menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

@media (min-width: 1024px) {
  .ek-menu {
    gap: 1.25rem;
  }
}

.ek-menu > li {
  position: relative;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ek-menu a {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(255 255 255 / 0.85);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

#colophon a.ek-menu a:hover {
  --tw-text-opacity: 1;
  color: #3ba9e0;
}

.ek-menu a:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.banner-overlay-top {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 155px;
}

/* Caret on items that have a dropdown. */

.ek-menu .menu-item-has-children > a::after {
  content: "";
  margin-left: 0.75rem;
  display: inline-block;
  height: 0.5rem;
  width: 0.5rem;
  --tw-translate-y: -0.125rem;
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-color: currentColor;
  opacity: 0.7;
}

/* Dropdown panel — hidden by default. */

.ek-menu .sub-menu {
  visibility: hidden;
  position: absolute;
  left: 0px;
  top: 100%;
  z-index: 50;
  min-width: 240px;
  --tw-translate-y: 0.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  border-radius: 0.75rem;
  border-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--ek-line) / var(--tw-border-opacity, 1));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding: 0.5rem;
  opacity: 0;
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Reveal on hover or keyboard focus within the parent item. */

.ek-menu .menu-item-has-children:hover > .sub-menu,
  .ek-menu .menu-item-has-children:focus-within > .sub-menu {
  visibility: visible;
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  opacity: 1;
}

/* Dropdown links. */

.ek-menu .sub-menu a {
  border-radius: 0.375rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

.ek-menu .sub-menu a:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-surface-alt) / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

.ek-menu .sub-menu a::after {
  content: none;
}

/* -------------------------------------------------------------------- *
   * Mobile menu — hamburger toggle + slide-in drawer.
   * -------------------------------------------------------------------- */

/* Hamburger button. */

.ek-nav-toggle {
  position: relative;
  display: inline-flex;
  height: 2.5rem;
  width: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.ek-nav-toggle:hover {
  background-color: rgb(255 255 255 / 0.1);
}

.ek-nav-toggle__bars,
  .ek-nav-toggle__bars::before,
  .ek-nav-toggle__bars::after {
  position: absolute;
  display: block;
  height: 0.125rem;
  width: 1.25rem;
  background-color: currentColor;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  content: "";
}

.ek-nav-toggle__bars::before {
  transform: translateY(-6px);
}

.ek-nav-toggle__bars::after {
  transform: translateY(6px);
}

/* Prevent background scroll while the drawer is open. */

.ek-no-scroll {
  overflow: hidden;
}

/* Drawer container (covers viewport when visible). */

.ek-drawer {
  position: fixed;
  inset: 0px;
  z-index: 60;
}

.ek-drawer__overlay {
  position: absolute;
  inset: 0px;
  background-color: rgb(0 0 0 / 0.5);
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.ek-drawer__panel {
  position: absolute;
  right: 0px;
  top: 0px;
  display: flex;
  height: 100%;
  width: 86%;
  max-width: 24rem;
  --tw-translate-x: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  flex-direction: column;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

.ek-drawer__panel:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.ek-drawer.is-open .ek-drawer__overlay {
  opacity: 1;
}

.ek-drawer.is-open .ek-drawer__panel {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ek-drawer__nav {
  flex: 1 1 0%;
  overflow-y: auto;
  padding: 1.25rem;
}

.ek-nav-close {
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-size: 1.5rem;
  line-height: 2rem;
  line-height: 1;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

.ek-nav-close:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-surface-alt) / var(--tw-bg-opacity, 1));
}

.woocommerce table.shop_table{
  border:none;
}

/* Mobile menu list. */

.ek-menu-mobile {
  display: flex;
  flex-direction: column;
}

.ek-menu-mobile li {
  position: relative;
  border-bottom-width: 1px;
  --tw-border-opacity: 1;
  border-color: rgb(var(--ek-line) / var(--tw-border-opacity, 1));
}

.ek-menu-mobile li:last-child {
  border-width: 0px;
}

.ek-menu-mobile a {
  display: block;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-right: 2.5rem;
  font-weight: 500;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

/* Submenu accordion toggle injected by JS. */

.ek-submenu-toggle {
  position: absolute;
  right: 0px;
  top: 0.375rem;
  display: inline-flex;
  height: 2.25rem;
  width: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-size: 1.25rem;
  line-height: 1.75rem;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink-muted) / var(--tw-text-opacity, 1));
}

.ek-submenu-toggle:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-surface-alt) / var(--tw-bg-opacity, 1));
}

.ek-menu-mobile .sub-menu {
  display: none;
  padding-left: 1rem;
}

.ek-menu-mobile .menu-item-has-children.is-expanded > .sub-menu {
  display: block;
}

.ek-menu-mobile .menu-item-has-children.is-expanded > .ek-submenu-toggle {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.ek-menu-mobile .sub-menu a {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink-muted) / var(--tw-text-opacity, 1));
}

/* -------------------------------------------------------------------- *
   * Accessibility — visually-hidden text available to screen readers.
   * Required by the WordPress accessibility guidelines (skip link, labels).
   * -------------------------------------------------------------------- */

.screen-reader-text {
  position: absolute;
  margin: -1px;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0px;
  padding: 0px;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  word-wrap: normal !important;
}

.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  z-index: 100000;
  border-radius: 0.25rem;
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-x-4 {
  left: 1rem;
  right: 1rem;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.-bottom-8 {
  bottom: -2rem;
}

.bottom-4 {
  bottom: 1rem;
}

.left-3\.5 {
  left: 0.875rem;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

.isolate {
  isolation: isolate;
}

.-z-10 {
  z-index: -10;
}

.z-10 {
  z-index: 10;
}

.z-40 {
  z-index: 40;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.-mb-16 {
  margin-bottom: -4rem;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.mt-0 {
  margin-top: 0px;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-12 {
  margin-top: 3rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-9 {
  margin-top: 2.25rem;
}

.mt-auto {
  margin-top: auto;
}

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.\!grid {
  display: grid !important;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}

.aspect-\[16\/9\] {
  aspect-ratio: 16/9;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.\!h-full {
  height: 100% !important;
}

.h-12 {
  height: 3rem;
}

.h-16 {
  height: 4rem;
}

.h-20 {
  height: 5rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-8 {
  height: 2rem;
}

.h-80 {
  height: 20rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[320px\] {
  height: 320px;
}

.h-\[35px\] {
  height: 35px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.h-screen {
  height: 100vh;
}

.max-h-full {
  max-height: 100%;
}

.min-h-\[240px\] {
  min-height: 240px;
}

.min-h-\[280px\] {
  min-height: 280px;
}

.min-h-\[420px\] {
  min-height: 420px;
}

.w-12 {
  width: 3rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-8 {
  width: 2rem;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-4xl {
  max-width: 56rem;
}

.max-w-\[200px\] {
  max-width: 200px;
}

.max-w-\[605px\] {
  max-width: 605px;
}

.max-w-full {
  max-width: 100%;
}

.max-w-none {
  max-width: none;
}

.max-w-xl {
  max-width: 36rem;
}

.max-w-xs {
  max-width: 20rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.resize {
  resize: both;
}

.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}

.snap-mandatory {
  --tw-scroll-snap-strictness: mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

.break-inside-avoid {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-x-10 {
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}

.gap-x-8 {
  -moz-column-gap: 2rem;
       column-gap: 2rem;
}

.gap-y-5 {
  row-gap: 1.25rem;
}

.gap-y-6 {
  row-gap: 1.5rem;
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-black\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(0 0 0 / 0.1);
}

.divide-black\/5 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(0 0 0 / 0.05);
}

.self-start {
  align-self: flex-start;
}

.self-center {
  align-self: center;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-card {
  border-radius: 0.75rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-t-card {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-\[\#2AA9DE6E\]\/40 {
  border-color: rgb(42 169 222 / 0.4);
}

.border-\[\#DEE6EA\] {
  --tw-border-opacity: 1;
  border-color: rgb(222 230 234 / var(--tw-border-opacity, 1));
}

.border-black\/10 {
  border-color: rgb(0 0 0 / 0.1);
}

.border-black\/5 {
  border-color: rgb(0 0 0 / 0.05);
}

.border-line {
  --tw-border-opacity: 1;
  border-color: rgb(var(--ek-line) / var(--tw-border-opacity, 1));
}

.border-primary\/30 {
  border-color: rgb(var(--ek-primary) / 0.3);
}

.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}

.bg-\[\#DFF6FF\] {
  --tw-bg-opacity: 1;
  background-color: rgb(223 246 255 / var(--tw-bg-opacity, 1));
}

.bg-\[\#F4F4F4\] {
  --tw-bg-opacity: 1;
  background-color: rgb(244 244 244 / var(--tw-bg-opacity, 1));
}

.bg-\[\#f0f7fc\] {
  --tw-bg-opacity: 1;
  background-color: rgb(240 247 252 / var(--tw-bg-opacity, 1));
}

.bg-navy {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-navy) / var(--tw-bg-opacity, 1));
}

.bg-navy-light {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-navy-light) / var(--tw-bg-opacity, 1));
}

.bg-navy\/65 {
  background-color: rgb(var(--ek-navy) / 0.65);
}

.bg-navy\/70 {
  background-color: rgb(var(--ek-navy) / 0.7);
}

.bg-navy\/75 {
  background-color: rgb(var(--ek-navy) / 0.75);
}

.bg-navy\/80 {
  background-color: rgb(var(--ek-navy) / 0.8);
}

.bg-navy\/90 {
  background-color: rgb(var(--ek-navy) / 0.9);
}

.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-primary) / var(--tw-bg-opacity, 1));
}

.bg-primary\/10 {
  background-color: rgb(var(--ek-primary) / 0.1);
}

.bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-surface) / var(--tw-bg-opacity, 1));
}

.bg-surface-alt {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-surface-alt) / var(--tw-bg-opacity, 1));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-navy\/80 {
  --tw-gradient-from: rgb(var(--ek-navy) / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--ek-navy) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-navy\/90 {
  --tw-gradient-from: rgb(var(--ek-navy) / 0.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(var(--ek-navy) / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-navy\/10 {
  --tw-gradient-to: rgb(var(--ek-navy) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--ek-navy) / 0.1) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-navy\/70 {
  --tw-gradient-to: rgb(var(--ek-navy) / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(var(--ek-navy) / 0.7) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.to-navy\/30 {
  --tw-gradient-to: rgb(var(--ek-navy) / 0.3) var(--tw-gradient-to-position);
}

.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-top {
  -o-object-position: top;
     object-position: top;
}

.p-0 {
  padding: 0px;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.\!py-16 {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.\!py-6 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.\!pb-0 {
  padding-bottom: 0px !important;
}

.\!pb-16 {
  padding-bottom: 4rem !important;
}

.\!pl-10 {
  padding-left: 2.5rem !important;
}

.\!pt-0 {
  padding-top: 0px !important;
}

.\!pt-\[60px\] {
  padding-top: 60px !important;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-12 {
  padding-bottom: 3rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pr-16 {
  padding-right: 4rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pt-0\.5 {
  padding-top: 0.125rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-16 {
  padding-top: 4rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-4 {
  padding-top: 1rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-start {
  text-align: start;
}

.font-heading {
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.italic {
  font-style: italic;
}

.leading-\[64px\] {
  line-height: 64px;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.\!text-white {
  --tw-text-opacity: 1 !important;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1)) !important;
}

.text-\[\#171717\] {
  --tw-text-opacity: 1;
  color: rgb(23 23 23 / var(--tw-text-opacity, 1));
}

.text-ink {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink) / var(--tw-text-opacity, 1));
}

.text-ink-invert {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink-invert) / var(--tw-text-opacity, 1));
}

.text-ink-muted {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-ink-muted) / var(--tw-text-opacity, 1));
}

.text-navy {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-navy) / var(--tw-text-opacity, 1));
}

.text-primary {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}

.underline {
  text-decoration-line: underline;
}

.opacity-80 {
  opacity: 0.8;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-500 {
  transition-duration: 500ms;
}

/* -------------------------------------------------------------------------------------- *
 * Design tokens — colour palette (RGB channels, consumed via rgb(var(--x) / <alpha>)).
 * Extracted from the EKTIMO design: sky-blue primary, deep navy, soft light-blue surface.
 * -------------------------------------------------------------------------------------- */

:root {
  --ek-primary: 59 169 224;
  /* #3BA9E0 sky blue (buttons, accents) */
  --ek-primary-hover: 37 143 199;
  /* #258FC7 darker on hover */
  --ek-navy: 5 19 29;
  /* #0B2733 dark section background */
  --ek-navy-light: 20 58 74;
  /* #143A4A lifted navy surfaces */
  --ek-surface: 255 255 255;
  /* #FFFFFF page background */
  --ek-surface-alt: 242 251 255;
  /* #E2F2FB light-blue section background */
  --ek-ink: 17 34 43;
  /* #11222B body text */
  --ek-ink-muted: 23 23 23;
  /* #5A6C76 secondary text */
  --ek-ink-invert: 240 247 251;
  /* #F0F7FB text on dark backgrounds */
  --ek-line: 224 231 235;
  /* #E0E7EB hairline borders */
}

/* -------------------------------------------------------------------------------------- *
 * Base element defaults.
 * -------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------- *
 * Reusable component classes (design system).
 * -------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------- *
 * Partners marquee — continuous auto-scrolling logo strip.
 *
 * The track holds N identical logo groups and is translated by exactly one group, so the
 * strip returns to a pixel-identical frame and the loop point cannot be seen. The default
 * -50% covers the two groups rendered server-side; assets/js/modules/partners-marquee.js
 * overrides --ek-marquee-shift with the measured group width once it has appended whatever
 * extra groups a wide container needs.
 *
 * Animation pauses on hover and respects prefers-reduced-motion.
 * -------------------------------------------------------------------------------------- */

.ek-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.ek-marquee__track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  align-items: center;
  gap: 0;
  animation: ek-marquee-scroll 28s linear infinite;
}

/*
 * One complete set of logos. Grouping the sets is what makes the loop exact: the shift is one
 * group rather than a fraction of the whole track, so appending or removing a group to fit the
 * container changes how much is on screen without moving the strip or disturbing the cycle.
 */

.ek-marquee__group {
  display: flex;
  margin: 0;
  padding: 0;
  align-items: center;
  flex: 0 0 auto;
  list-style: none;
}

.ek-marquee:hover .ek-marquee__track {
  animation-play-state: paused;
}

.ek-marquee__item {
  padding-right: 2.5rem;
}

.whmc_ft-buttons-con .wmcchevkoutprocess .wmctitel{
  padding: 8px 16px;
  font-size: 15px;
  letter-spacing: 1px;
}

@media (min-width: 768px) {
  .ek-marquee__item {
    padding-right: 3.5rem;
  }
}

/*
 * Uniform slide box.
 *
 * Every logo occupies an identical fixed-size cell instead of being sized by height alone.
 * The source artwork ranges from 0.78 to 4.55 in aspect ratio, so a height-only rule made the
 * wide wordmarks roughly six times the width of the near-square marks — the inconsistency the
 * client reported.
 *
 * A definite box also keeps the marquee measurable: the JS clones enough copies to span the
 * viewport based on one set's width, and it can only compute that reliably when each slide's
 * footprint is fixed rather than dependent on how each file happens to decode.
 */

.ek-marquee__box {
  display: flex;
  height: 3rem;
  width: 100%;
  max-width: 120px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.wc-block-components-additional-fields-list{
  border-radius: 10px;
}

@media (min-width: 768px) {
  .ek-marquee__box {
    height: 3.5rem;
    max-width: 160px;
  }
}

@media screen and (max-width:768px){
  .woocommerce-table--order-details{
    display:flex !important;
    flex-direction: column;
    gap:10px
  }

  .woocommerce table.shop_table tfoot th, .woocommerce-order .woocommerce-table--order-details td.product-name{
    border: none;
  }
}

/*
 * A <picture> wrapper must be sized too, or the image escapes the box.
 *
 * WebP Express wraps every logo in <picture><source><img></picture>. <picture> is an inline
 * element with no intrinsic size, so the img's max-height:100% resolved against the picture
 * rather than the flex box — the constraint never applied, the logo overflowed its cell and
 * the box clipped it. Making the wrapper a full-size flex parent restores the chain.
 */

.ek-marquee__box picture {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

/*
 * The image fills whichever axis binds first and stops there. object-contain preserves the
 * intrinsic ratio, so nothing is stretched or cropped — a wide logo hits the width limit, a
 * tall one hits the height limit, and both stay inside the same cell.
 */

.ek-marquee__item img {
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0.75;
  transition: opacity 0.2s ease;
}

.ek-marquee__item img:hover {
  opacity: 1;
}

@keyframes ek-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to   {
    transform: translateX(var(--ek-marquee-shift, -50%));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ek-marquee__track {
    animation: none;
    flex-wrap: wrap;
    /*
     * max-content sizing makes flex-wrap inert — the track simply grows to the full unwrapped
     * row and the container clips it, so the later logos are never reachable once the
     * animation is off. A container-width track lets the wrap actually happen.
     */
    width: 100%;
    justify-content: center;
    row-gap: 1.5rem;
  }

  /* The groups wrap too, or each one stays a single un-wrappable row wider than the screen. */

  .ek-marquee__group {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1.5rem;
  }
}

/* -------------------------------------------------------------------------------------- *
 * Gravity Forms overrides.
 *
 * Deliberately OUTSIDE @layer components. Tailwind purges any rule in that layer whose
 * selector it cannot find in the `content` globs, and Gravity Forms markup is generated by
 * the plugin at runtime — so .gform_* rules placed inside the layer are silently dropped
 * from the build. Declaring them here keeps them in the stylesheet.
 *
 * GF lays fields out on a CSS grid with a generous default row gap; these tighten it to the
 * theme's rhythm. !important is needed because Gravity Forms' own stylesheet loads after the
 * theme's and uses equally specific selectors.
 * -------------------------------------------------------------------------------------- */

.ek-form .gform_wrapper .gform_fields,
.gform_wrapper form .gform-body .gform_fields {
  row-gap: 20px !important;
  -moz-column-gap: 16px !important;
       column-gap: 16px !important;
}

/* GF reserves margin on each field on top of the grid gap — remove the double spacing. */

.ek-form .gform_wrapper .gfield {
  margin-top: 0 !important;
}

/* Keep the message box compact. */

.gform-theme--foundation .gfield textarea.medium {
  min-block-size: 6rem !important;
}

/* Submit row sits closer to the last field. */

.ek-form .gform_wrapper .gform_footer {
  margin-top: 16px !important;
  padding: 0 !important;
}

/* Hide the validation error summary banner. */

.gform_validation_errors {
  display: none !important;
}

/* -------------------------------------------------------------------------------------- *
 * Contact block — pill-field design.
 *
 * Targets the .ek-contact-form-card wrapper added in includes/blocks/contact/render.php.
 * Declared outside @layer so the rules survive the Tailwind purge (GF markup is runtime).
 * -------------------------------------------------------------------------------------- */

/* Heading blue underline. */

.ek-contact-form-card h2 {
  font-size:40px;
}

/*
 * Contact form field appearance.
 *
 * Shared by BOTH contact blocks so they look identical:
 *   .ek-contact-form-card    -> EKTIMO Contact Form block (home page)
 *   .ek-contact-panel__form  -> EKTIMO Contact Panel block (contact page)
 *
 * Previously these rules were scoped to the home card alone, so the contact page inherited
 * the field grid from .ek-form but none of the field styling — bare boxes and a small
 * left-aligned submit instead of the rounded fields and full-width pill button.
 */

/* Single-line fields — placeholder form and GF. */

.ek-contact-form-card .ek-form input[type="text"],
.ek-contact-form-card .ek-form input[type="email"],
.ek-contact-form-card .ek-form input[type="tel"],
.ek-contact-form-card .ek-form input[type="url"],
.ek-contact-form-card .ek-form input[type="number"],
.ek-contact-form-card .ek-form select,
.ek-contact-form-card .gform_wrapper input[type="text"],
.ek-contact-form-card .gform_wrapper input[type="email"],
.ek-contact-form-card .gform_wrapper input[type="tel"],
.ek-contact-form-card .gform_wrapper input[type="url"],
.ek-contact-form-card .gform_wrapper input[type="number"],
.ek-contact-form-card .gform_wrapper select,
.ek-contact-panel__form .ek-form input[type="text"],
.ek-contact-panel__form .ek-form input[type="email"],
.ek-contact-panel__form .ek-form input[type="tel"],
.ek-contact-panel__form .ek-form input[type="url"],
.ek-contact-panel__form .ek-form input[type="number"],
.ek-contact-panel__form .ek-form select,
.ek-contact-panel__form .gform_wrapper input[type="text"],
.ek-contact-panel__form .gform_wrapper input[type="email"],
.ek-contact-panel__form .gform_wrapper input[type="tel"],
.ek-contact-panel__form .gform_wrapper input[type="url"],
.ek-contact-panel__form .gform_wrapper input[type="number"],
.ek-contact-panel__form .gform_wrapper select {
  border-radius: 10px !important;
  padding:0rem 1.25rem !important;
  background-color: #fff !important;
  border: 1.5px solid rgb(var(--ek-line)) !important;
}

/* Textarea — rounded but not pill. */

.ek-contact-form-card .ek-form textarea,
.ek-contact-form-card .gform_wrapper textarea,
.ek-contact-panel__form .ek-form textarea,
.ek-contact-panel__form .gform_wrapper textarea {
  border-radius: 1rem !important;
  padding: 0.875rem 1.25rem !important;
  background-color: #fff !important;
  border: 1.5px solid rgb(var(--ek-line)) !important;
}

/* Submit button — full-width pill. */

.ek-contact-form-card .ek-form input[type="submit"],
.ek-contact-form-card .ek-form button[type="submit"],
.ek-contact-form-card .gform_wrapper input[type="submit"],
.ek-contact-form-card .gform_wrapper button[type="submit"],
.ek-contact-panel__form .ek-form input[type="submit"],
.ek-contact-panel__form .ek-form button[type="submit"],
.ek-contact-panel__form .gform_wrapper input[type="submit"],
.ek-contact-panel__form .gform_wrapper button[type="submit"] {
  border-radius: 9999px !important;
  width: 100% !important;
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
  background: #2AA9DE !important;
}

#primary-menu .sub-menu .new-tag a{
  position:relative;
}

#primary-menu .sub-menu .new-tag a:after{
  content:'New';
  display: inline-block;
  background-color: #2AA9DE;
  color: #fff;
  font-size: 0.6rem;
  font-weight: bold;
  padding:0px 0.3rem;
  border-radius: 0.2rem;
  margin-left: 0.5rem;
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  right:5px
}

/* -------------------------------------------------------------------------------------- *
 * Team block.
 *
 * Featured members: horizontal card (photo left, badge/name/position/icons right).
 * Regular members: white card with circular photo on light-blue bg, name, position, icons.
 * Declared outside @layer components so rules are never purged.
 * -------------------------------------------------------------------------------------- */

/* ---- Jump nav ---- */

/*
 * Every group is always rendered (see team-display.php) — this bar does not show/hide anything,
 * it only smooth-scrolls its target group to the top of the viewport. `scroll-behavior: smooth`
 * below does the scrolling; no JS is required for a click to work.
 */

.ek-team__filters {
  position: sticky;
  top: var(--ek-sticky-top, 0px);
  z-index: 30;
  display: flex;
  align-items:center;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-color: rgb(var(--ek-surface-alt));
  padding:0 10px;
  margin-bottom:40px;
}

@media (min-width:1025px) {
  .ek-team__filters {
    overflow-x: visible;
  }
}

.ek-team__filter {
  flex: 0 0 auto;
  display: block;
  padding: 1.1rem 1.5rem;
  border-right: 1px solid rgb(var(--ek-line));
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  color: rgb(var(--ek-navy));
  transition: background-color 0.2s, color 0.2s;
}

.ek-team__filter:last-child {
  border-right: 0;
}

@media (min-width:1025px) {
  .ek-team__filter {
    flex: 1 1 0;
    white-space: normal;
  }
}

.ek-team__filter:hover {
  background-color: rgb(var(--ek-primary) / 0.15);
  color: rgb(var(--ek-primary));
}

.ek-team__filter:focus-visible {
  outline: 2px solid rgb(var(--ek-primary));
  outline-offset: -2px;
}

.ek-team__filter[aria-current='true'] {
  background-color: rgb(var(--ek-navy));
  color: #fff;
}

/*
 * The group a filter link points to — offset so the sticky site header and the now-sticky
 * filter bar sitting on top of it never cover the heading being scrolled to. --ek-scroll-offset
 * is measured live in assets/js/modules/team-sticky-offset.js; 120px is only the no-JS/first-
 * paint fallback.
 */

.ek-team__panel[id] {
  scroll-margin-top: var(--ek-scroll-offset, 120px);
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.ek-team__filters) {
    scroll-behavior: smooth;
  }
}

/* ---- Regular member card ---- */

.ek-team__grid{
  margin:0 -10px;
}

.ek-team__grid li{
  padding:0 10px;
}

.ek-team__card {
  background: #fff;
  padding: 1.75rem 0 1.25rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/*
 * Circular photo — light-blue background, thin ring, and a white gap between ring and photo.
 *
 * The ring is a real border here, with padding inside it to hold the photo away from the
 * edge. That combination only works because of `background-clip: content-box`: the element's
 * own background would otherwise fill the padding too, and `overflow: hidden` alone would
 * clip the <img> flush against the border with no visible gap at all.
 *
 * box-sizing is forced to content-box so the padding and border sit OUTSIDE the declared
 * width. Tailwind's preflight sets `box-sizing: border-box` globally, under which the 5px
 * padding and 1px border would eat into the 190px and shrink the photo instead.
 */

.ek-team__avatar {
  position: relative;
  flex-shrink: 0;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
  background-color: #dbeafe;
  background-clip: content-box;
  box-sizing: content-box;
}

/*
 * The photo needs its own radius now that the wrapper carries padding.
 *
 * `overflow: hidden` on the wrapper clips to the padding edge, not the content box, so the
 * image would show square corners sitting inside the ring. Rounding the image directly keeps
 * it circular within the gap.
 */

/* Initials shown when a member has no photo. */

.ek-team__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  font-weight: 700;
  color: rgb(var(--ek-primary));
}

/*
 * Name — uppercase, letter-spaced, to match the approved design.
 *
 * Set with text-transform rather than by changing the stored values, so the post titles and
 * ACF fields keep their natural capitalisation everywhere else (admin lists, page titles,
 * alt text) and only the display here is affected.
 */

.ek-team__name {
  margin-top: 1.125rem;
  font-size:22px;
  font-weight: 700;
  line-height: 1.3;
  color: rgb(var(--ek-navy));
}

.ek-team__position {
  margin-top: 0.25rem;
  font-size:16px;
  line-height: 1.4;
  color: rgb(var(--ek-primary));
  font-weight: 600;
}

/* Social icon links (email / LinkedIn). */

.ek-team__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

.ek-team__link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  border: 1.5px solid rgb(var(--ek-primary));
  color: rgb(var(--ek-primary));
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.ek-team__link-icon:hover {
  background-color: rgb(var(--ek-primary));
  color: #fff;
}

/* ---- Featured member card (horizontal) ---- */

.ek-team__features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2.75rem;
}

.ek-team__feature-item {
  width: 100%;
  max-width: 500px;
}

.ek-team__feature-card {
  align-items: center;
  gap: 1.75rem;
  background: #fff;
  border-radius: 16px;
  padding: 1.75rem 2rem;
  width: 100%;
}

.team-preview{
  padding-top: calc(125% + 85px);
  background-position: center center;
  background-size: cover;
}

.ek-team__feature-photo {
  flex-shrink: 0;
}

/*
 * Below 640px the feature card stacks instead of sitting side by side.
 *
 * The horizontal layout runs out of room on a phone: at a 375px viewport the card is 320px wide,
 * and once the 202px avatar, 64px of horizontal padding and the 28px gap are taken the text
 * column is left with 26px. That forced "Glenn Easterby" onto two lines and "FIELD OPERATIONS
 * MANAGER" onto three, which is the broken mobile layout reported.
 *
 * The threshold is 640px, not 480px, because measuring showed the row layout still wrapping the
 * name to two lines and the role to three at exactly 480px — the avatar had grown to 222px by
 * then, so widening the viewport alone did not give the text enough room. 640px is the first
 * width where both fit on one line.
 *
 * Stacking gives the name and role the card's full width, and centring keeps the block aligned
 * with the grid cards below it.
 */

@media (max-width: 639px) {
  .ek-team__feature-card {
    flex-direction: column;
    align-items: center;
    gap: 1.125rem;
    /* The generous side padding exists for the row layout; stacked, it only steals width. */
    padding: 1.5rem 1.25rem;
    text-align: center;
  }

  /* Links and badge are left-aligned for the row layout; centre them when stacked. */

  .ek-team__feature-body .ek-team__links {
    justify-content: center;
  }
}

/*
 * Featured (manager) avatars match the grid avatars, then step up on wider screens.
 *
 * These were 140px / 160px against the grid's 190px, so a featured member rendered a 172px
 * circle above 202px circles — the manager appeared SMALLER than their own team, which is what
 * the client reported. Both values are outer sizes: the shared .ek-team__avatar rule adds 5px
 * padding and a 1px ring outside the declared width via `box-sizing: content-box`.
 *
 * Rather than simply matching 190px, the featured avatar now equals the grid size on small
 * screens and grows to 210px from 480px up. Parity alone would leave the featured member reading
 * as just another card; a modest step up restores the visual hierarchy the layout intends while
 * removing the "smaller than the rest" effect.
 *
 * Kept as width + max-width (not a single value) to preserve the existing shrink behaviour: the
 * avatar still narrows below its cap inside a cramped horizontal feature card.
 */

.ek-team__avatar--feature {
  width: 190px;
  max-width: 190px;
}

@media (min-width: 480px) {
  .ek-team__avatar--feature {
    width: 210px;
    max-width: 210px;
  }
}

.ek-team__feature-body {
  flex: 1;
  min-width: 0;
}

/* Badge pill (e.g. "Manager") */

.ek-team__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background-color: rgb(var(--ek-primary));
  color: #fff;
  border-radius: 9999px;
  padding: 0.25rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
}

/*
 * Featured cards keep their natural capitalisation.
 *
 * The uppercase treatment applies to the circular grid cards shown in the approved design.
 * These larger horizontal cards were not part of that change, and a long name in caps reads
 * poorly at this size, so the transform inherited from .ek-team__name is reset here.
 */

.ek-team__feature-body .ek-team__name {
  margin-top: 0;
  font-size: 1.375rem;
  text-transform: none;
  letter-spacing: normal;
}

.ek-team__divider {
  border: 0;
  border-top: 1px solid rgb(var(--ek-line));
  margin: 0.75rem 0;
}

.ek-team__panel.ek-team__panel--sub{
  margin-bottom:30px
}

.ek-team__feature-body .ek-team__links {
  justify-content: flex-start;
  margin-top: 0;
}

/* ---- Grid layout ---- */

.ek-team__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top:0;
  list-style: none;
  padding: 0;
}

.ek-team__panel{
  margin-bottom:50px
}

/* Group heading — every group (and subgroup) is printed in full, so this always shows. */

.ek-team__panel-heading {
  display: inline-block;
  margin-top:0;
  font-size:2.3rem;
  font-weight: 700;
  color: rgb(var(--ek-navy));
}

.ek-team__panel--sub .ek-team__panel-heading{
  padding:0 10px;
}

.ek-team__panel:first-child > .ek-team__panel-heading {
  margin-top: 0;
}

/* Subgroup heading — smaller, in the accent colour, to sit under its parent group heading. */

h4.ek-team__panel-heading {
  margin-top:10px;
  font-size:22px;
  background-color: rgb(var(--ek-primary));
  color:#fff
}

/* -------------------------------------------------------------------------------------- *
 * Case Studies block.
 *
 * Filterable 3-column card grid. Cards have a full-width image, a circular category-icon
 * badge overlapping the image/body junction, title, summary and a read-more link.
 * Category filter pills sit above the grid; a CTA banner sits below.
 * -------------------------------------------------------------------------------------- */

/* ---- Filter pills ---- */

.ek-cs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.ek-cs-filter {
  cursor: pointer;
  border: 1.5px solid rgb(var(--ek-line));
  border-radius: 9999px;
  background-color: transparent;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--ek-navy));
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.ek-cs-filter:hover {
  border-color: rgb(var(--ek-primary));
  color: rgb(var(--ek-primary));
}

.ek-cs-filter:focus-visible {
  outline: 2px solid rgb(var(--ek-primary));
  outline-offset: 2px;
}

.ek-cs-filter[aria-selected='true'] {
  background-color: rgb(var(--ek-primary));
  border-color: rgb(var(--ek-primary));
  color: #fff;
}

/* ---- Card ---- */

.ek-cs-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgb(var(--ek-line));
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.06);
  transition: box-shadow 0.2s, transform 0.2s;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.ek-cs-card:hover {
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.1);
  transform: translateY(-2px);
}

.ek-cs-card__img-outer {
  position: relative;
}

.ek-cs-card__img-inner {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: rgb(var(--ek-surface-alt));
}

.ek-cs-card__img-inner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* Circular category icon badge — overlaps between image bottom and card body. */

.ek-cs-card__icon {
  position: absolute;
  bottom: -22px;
  left: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  background-color: rgb(var(--ek-navy));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
  z-index: 1;
}

.ek-cs-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2.25rem 1.25rem 1.5rem;
}

.ek-cs-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: rgb(var(--ek-navy));
}

.ek-cs-card__desc {
  margin-top: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgb(var(--ek-ink-muted));
  flex: 1;
}

.ek-cs-card__link {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--ek-primary));
  text-decoration: none;
  transition: color 0.2s;
}

.ek-cs-card:hover .ek-cs-card__link {
  color: rgb(var(--ek-primary-hover));
}

/* ---- CTA banner ---- */

.ek-cs-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background-color: rgb(var(--ek-surface-alt));
  border: 1px solid rgb(var(--ek-line));
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
}

.ek-cs-cta__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  border: 1.5px solid rgb(var(--ek-line));
  background: #fff;
  color: rgb(var(--ek-primary));
}

.ek-cs-cta__text {
  flex: 1;
  min-width: 0;
}

.ek-cs-cta__heading {
  font-size: 1rem;
  font-weight: 700;
  color: rgb(var(--ek-navy));
}

.ek-cs-cta__sub {
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: rgb(var(--ek-ink-muted));
}

@media (max-width: 639px) {
  .ek-cs-cta {
    flex-wrap: wrap;
  }

  .ek-cs-cta .ek-btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* -------------------------------------------------------------------- *
 * Services / Sectors taxonomy card — professional redesign.
 * Used in taxonomy-ektimo_sec_svc_cat.php
 * -------------------------------------------------------------------- */

.ek-svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.35s ease, transform 0.35s ease;
  height:100%;
}

.ek-svc-card:hover {
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.13);
  transform: translateY(-4px);
}

.ek-svc-card__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: rgb(var(--ek-surface-alt));
  display: block;
}

.ek-svc-card__img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.55s ease;
}

.ek-svc-card:hover .ek-svc-card__img {
  transform: scale(1.07);
}

.ek-svc-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 19, 29, 0.68) 0%, transparent 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1rem 1.125rem;
}

.ek-svc-card:hover .ek-svc-card__overlay {
  opacity: 1;
}

.ek-svc-card__overlay-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgb(var(--ek-primary));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.4rem 0.875rem;
  border-radius: 9999px;
}

.ek-svc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.375rem 1.5rem 1.5rem;
}

.ek-svc-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: rgb(var(--ek-navy));
}

.ek-svc-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}

.ek-svc-card__title a:hover {
  color: rgb(var(--ek-primary));
}

.ek-svc-card__excerpt {
  margin-top: 0.6rem;
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.7;
  color: rgb(var(--ek-ink-muted));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ek-svc-card__footer {
  display: flex;
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(var(--ek-line));
}

.ek-svc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgb(var(--ek-primary));
  text-decoration: none;
  transition: gap 0.25s ease, color 0.2s;
}

.ek-svc-card__cta:hover {
  gap: 0.75rem;
  color: rgb(var(--ek-primary-hover));
}

.ek-svc-card__cta-icon {
  flex-shrink: 0;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: rgb(var(--ek-primary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  line-height: 1;
  transition: background 0.2s;
}

.ek-svc-card__cta:hover .ek-svc-card__cta-icon {
  background: rgb(var(--ek-navy));
}

/* Section intro row above the grid */

.ek-svc-grid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.ek-svc-grid-header__count {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgb(var(--ek-primary));
}

.ek-svc-grid-header__back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(var(--ek-ink-muted));
  text-decoration: none;
  transition: color 0.2s;
}

.ek-svc-grid-header__back:hover {
  color: rgb(var(--ek-navy));
}

/* -------------------------------------------------------------------------------------- *
 * Image lightbox.
 *
 * Styles the modal that assets/js/modules/lightbox.js builds and appends to <body> when a
 * gallery thumbnail is clicked. The module was already wired up on the case study, sector and
 * service galleries, but no styles existed for it — so the modal was created unstyled and
 * never visibly opened.
 *
 * Declared outside @layer so the rules are never purged: every class here appears only in the
 * JS-generated markup, which Tailwind's content scanner does not see.
 *
 * DOM built by the module:
 *   #ek-lightbox > .ek-lb__backdrop
 *                > .ek-lb__stage > .ek-lb__prev / .ek-lb__next / .ek-lb__close
 *                                > .ek-lb__figure > .ek-lb__img
 * -------------------------------------------------------------------------------------- */

#ek-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The module toggles the `hidden` attribute; display:flex above would otherwise beat it. */

#ek-lightbox[hidden] {
  display: none;
}

.ek-lb__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / 0.88);
}

.ek-lb__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  max-width: 88rem;
  padding: 3.5rem 1rem;
}

.ek-lb__figure {
  margin: 0;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.ek-lb__img {
  max-height: 82vh;
  max-width: 100%;
  width: auto;
  height: auto;
  border-radius: 0.5rem;
  -o-object-fit: contain;
     object-fit: contain;
  background-color: rgb(255 255 255 / 0.04);
}

/* Prev / next / close controls. */

.ek-lb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 9999px;
  background-color: rgb(255 255 255 / 0.12);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.ek-lb__btn:hover,
.ek-lb__btn:focus-visible {
  background-color: rgb(var(--ek-primary));
}

.ek-lb__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.ek-lb__btn[hidden] {
  display: none;
}

.ek-lb__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
}

/*
 * On small screens the arrows overlay the image edges rather than sitting beside it, so the
 * photo keeps the full width of the viewport.
 */

@media (max-width: 639px) {
  .ek-lb__stage {
    gap: 0;
    padding: 3.5rem 0.5rem;
  }

  .ek-lb__prev,
  .ek-lb__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }

  .ek-lb__prev {
    left: 0.5rem;
  }

  .ek-lb__next {
    right: 0.5rem;
  }
}

/* Gallery thumbnails advertise themselves as clickable. */

[data-ek-lightbox] a[data-lightbox-src] {
  cursor: zoom-in;
}

/* -------------------------------------------------------------------------------------- *
 * Products & Equipment archive.
 *
 * The filter panel sits on the dark hero, so its controls need explicit light styling: the
 * theme's form rules target .ek-form / .ek-contact-panel__form and do not reach here.
 *
 * Declared outside @layer so nothing is purged — these classes appear only in the archive
 * templates under woocommerce/ and template-parts/woocommerce/.
 * -------------------------------------------------------------------------------------- */

.ek-filter-input,
.ek-filter-select {
  width: 100%;
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 6px;
  background-color: rgb(255 255 255 / 0.08);
  padding: 0.8rem 1rem;
  font-size: 0.9375rem;
  color: #fff;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ek-filter-input::-moz-placeholder {
  color: rgb(255 255 255 / 0.6);
}

.ek-filter-input::placeholder {
  color: rgb(255 255 255 / 0.6);
}

.ek-filter-input:focus,
.ek-filter-select:focus {
  outline: none;
  border-color: rgb(var(--ek-primary));
  background-color: rgb(255 255 255 / 0.14);
}

/*
 * Native select options inherit the page colours in most browsers, not the control's, so they
 * are set explicitly — white-on-white options are otherwise unreadable once opened.
 */

.ek-filter-select option {
  color: rgb(var(--ek-navy));
  background-color: #fff;
}

/* Custom chevron; appearance:none removes the platform arrow that clashes on dark. */

.ek-filter-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}

/* ---- Light filter form (white-background variant) ---- */

.ek-filter-input--light,
.ek-filter-select--light {
  width: 100%;
  border: 1px solid rgb(var(--ek-line));
  border-radius: 6px;
  background-color: #fff;
  padding: 0.8rem 1rem;
  font-size: 0.9375rem;
  color: rgb(var(--ek-ink));
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ek-filter-input--light::-moz-placeholder {
  color: rgb(var(--ek-ink-muted) / 0.5);
}

.ek-filter-input--light::placeholder {
  color: rgb(var(--ek-ink-muted) / 0.5);
}

.ek-filter-input--light:focus,
.ek-filter-select--light:focus {
  outline: none;
  border-color: rgb(var(--ek-primary));
  box-shadow: 0 0 0 3px rgb(var(--ek-primary) / 0.15);
}

.ek-filter-select--light {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.5rem;
}

/* ---- Card ---- */

.ek-product-card {
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/*
 * Product image box — listings, detail page and Related Products all use this one card.
 *
 * Two problems are solved here:
 *
 * 1. Cropping. object-contain on the <img> keeps the whole product visible at its natural
 *    aspect ratio; nothing is cover-cropped or stretched.
 *
 * 2. Overlap. The height used to live in a utility class on the link, but WebP Express wraps
 *    every thumbnail in <picture> — an inline element with no height — so the image's
 *    max-height:100% resolved against the picture rather than the link and never applied.
 *    Thumbnails are 400px tall in a ~218px content box, overflowing by ~182px straight over
 *    the product title. Sizing the wrapper restores the chain, and overflow:hidden is a
 *    belt-and-braces guarantee that nothing can escape the card whatever markup a plugin
 *    injects around the image.
 *
 * Heights step down on smaller screens so cards stay proportionate.
 */

.ek-product-card__media {
  height: 200px;
  flex: 0 0 auto;
}

@media (min-width: 640px) {
  .ek-product-card__media {
    height: 220px;
  }
}

@media (min-width: 1024px) {
  .ek-product-card__media {
    height: 250px;
  }
}

/* Any wrapper a plugin injects between the link and the image must be sized too. */

.ek-product-card__media picture,
.ek-product-card__media > span {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

/*
 * Belt and braces: constrain the image against the box directly, not only via max-h-full.
 * If a plugin ever introduces a wrapper this stylesheet does not know about, the image is
 * still bounded and cannot spill over the heading.
 */

.ek-product-card__media img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.ek-product-card:hover {
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.10);
  transform: translateY(-2px);
}

/* ---- Pagination (WooCommerce markup) ---- */

.ek-products-archive .woocommerce-pagination {
  margin-top: 2.5rem;
}

.ek-products-archive .woocommerce-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:0;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
}

.ek-products-archive .woocommerce-pagination li {
  border-right:none !important;
  margin: 0 3px !important;
}

.ek-products-archive .woocommerce-pagination a.page-numbers,
.ek-products-archive .woocommerce-pagination span.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.6rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgb(var(--ek-primary));
  transition: background-color 0.15s ease, color 0.15s ease;
  background:#f2fbff;
}

.ek-products-archive .woocommerce-pagination a.page-numbers:hover {
  background-color: rgb(var(--ek-primary) / 0.1);
}

.ek-products-archive .woocommerce-pagination span.current {
  background-color: rgb(var(--ek-primary))!important;
  color: #fff !important;
}

/* -------------------------------------------------------------------------------------- *
 * Single product tabs.
 *
 * Description / Features & Applications / Downloads. The row sits on a dark teal rule with the
 * active tab marked by a cyan segment beneath it, matching the live site.
 *
 * Declared outside @layer so nothing is purged — these classes appear only in
 * woocommerce/single-product.php.
 * -------------------------------------------------------------------------------------- */

.ek-product-tabs [role='tablist'] {
  position: relative;
}

/* The dark rule the active segment sits on. */

.ek-product-tabs [role='tablist']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background-color: rgb(var(--ek-secondary));
}

.ek-product-tab {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  cursor: pointer;
  padding: 1.15rem 0.25rem;
  font-size: 1rem;
  font-weight: 700;
  color: rgb(var(--ek-secondary));
  transition: color 0.15s ease;
}

.ek-product-tab:hover {
  color: rgb(var(--ek-primary));
}

.ek-product-tab:focus-visible {
  outline: 2px solid rgb(var(--ek-primary));
  outline-offset: 2px;
}

/* Active tab: cyan segment across the rule. */

.ek-product-tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: -1.25rem;
  right: -1.25rem;
  bottom: 0;
  height: 4px;
  background-color: rgb(var(--ek-primary));
}

.wc-block-order-confirmation-additional-fields-wrapper{
  padding-top:20px;
}

@media (max-width: 639px) {
  .ek-product-tab {
    font-size: 0.9375rem;
    padding: 0.9rem 0.25rem;
  }
}

/* ======================================================================================
 * News archive + single post.
 *
 * Markup: archive.php, single.php, template-parts/news-card.php
 *
 * Declared outside @layer so the rules survive the Tailwind purge — several class names are
 * emitted from PHP template parts and from WordPress pagination markup, which the content
 * scanner does not always see as literal strings.
 * ====================================================================================== */

/* -- Category filter pills --------------------------------------------------------- */

.ek-news-filters {
  margin-bottom: 2.5rem;
}

.ek-news-filters__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ek-news-pill {
  align-items: center;
  background-color: #fff;
  border: 1.5px solid rgb(var(--ek-line));
  border-radius: 9999px;
  color: rgb(var(--ek-ink));
  display: inline-flex;
  font-size: 0.875rem;
  font-weight: 600;
  gap: 0.5rem;
  padding: 0.5rem 1.125rem;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ek-news-pill:hover,
.ek-news-pill:focus-visible {
  border-color: rgb(var(--ek-primary));
  color: rgb(var(--ek-primary));
}

.ek-news-pill.is-active {
  background-color: rgb(var(--ek-primary));
  border-color: rgb(var(--ek-primary));
  color: #fff;
}

.ek-news-pill__count {
  background-color: rgb(var(--ek-surface-alt));
  border-radius: 9999px;
  color: rgb(var(--ek-ink-muted));
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.2rem 0.45rem;
}

.ek-news-pill.is-active .ek-news-pill__count {
  background-color: rgb(255 255 255 / 0.25);
  color: #fff;
}

/* -- Card grid --------------------------------------------------------------------- */

.ek-news-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .ek-news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .ek-news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ek-news-grid--related {
  margin-top: 2rem;
}

.ek-news-card-item {
  display: flex;
  margin: 0;
}

/* -- Card ------------------------------------------------------------------------- */

.ek-news-card {
  background-color: #fff;
  border: 1px solid rgb(var(--ek-line));
  border-radius: 12px;
  box-shadow: 0 1px 6px rgb(0 0 0 / 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  width: 100%;
}

.ek-news-card:hover,
.ek-news-card:focus-visible {
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.1);
  transform: translateY(-2px);
}

.ek-news-card__media {
  aspect-ratio: 16 / 9;
  background-color: rgb(var(--ek-surface-alt));
  overflow: hidden;
}

.ek-news-card__img {
  display: block;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease;
  width: 100%;
}

.ek-news-card:hover .ek-news-card__img {
  transform: scale(1.05);
}

.ek-news-card__img-fallback {
  background-color: rgb(var(--ek-surface-alt));
  height: 100%;
  width: 100%;
}

.ek-news-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem 1.375rem 1.5rem;
}

.ek-news-card__meta {
  align-items: center;
  color: rgb(var(--ek-ink-muted));
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
  font-weight: 600;
  gap: 0.4rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.625rem;
  text-transform: uppercase;
}

.ek-news-card__cats {
  color: rgb(var(--ek-primary));
}

.ek-news-card__title {
  color: rgb(var(--ek-ink));
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}

.ek-news-card:hover .ek-news-card__title {
  color: rgb(var(--ek-primary));
}

.ek-news-card__excerpt {
  color: rgb(var(--ek-ink-muted));
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0.625rem 0 0;
}

/* Pushed to the bottom so the link sits on a common baseline across cards of unequal text. */

.ek-news-card__more {
  color: rgb(var(--ek-primary));
  font-size: 0.875rem;
  font-weight: 700;
  margin-top: auto;
  padding-top: 1rem;
}

/* -- Pagination -------------------------------------------------------------------- */

/*
 * WordPress prints .navigation.pagination with .nav-links inside. Styled by those classes
 * because the class argument to the_posts_pagination() is added alongside, not instead.
 */

.ek-news-archive .navigation.pagination {
  margin-top: 3rem;
}

.ek-news-archive .nav-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.ek-news-archive .nav-links .page-numbers {
  align-items: center;
  background-color: #fff;
  border: 1.5px solid rgb(var(--ek-line));
  border-radius: 0.5rem;
  color: rgb(var(--ek-ink));
  display: inline-flex;
  font-size: 0.9375rem;
  font-weight: 600;
  justify-content: center;
  min-height: 2.5rem;
  min-width: 2.5rem;
  padding: 0 0.75rem;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ek-news-archive .nav-links a.page-numbers:hover,
.ek-news-archive .nav-links a.page-numbers:focus-visible {
  border-color: rgb(var(--ek-primary));
  color: rgb(var(--ek-primary));
}

.ek-news-archive .nav-links .page-numbers.current {
  background-color: rgb(var(--ek-primary));
  border-color: rgb(var(--ek-primary));
  color: #fff;
}

.ek-news-archive .nav-links .page-numbers.dots {
  background-color: transparent;
  border-color: transparent;
}

/* -- Empty state ------------------------------------------------------------------- */

.ek-news-empty {
  background-color: rgb(var(--ek-surface-alt));
  border: 1px solid rgb(var(--ek-line));
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  text-align: center;
}

/* -- Single post: hero tags + byline ----------------------------------------------- */

.ek-news-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.ek-news-tag {
  background-color: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: 9999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.85rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.15s ease;
}

.ek-news-tag:hover,
.ek-news-tag:focus-visible {
  background-color: rgb(var(--ek-primary));
  border-color: rgb(var(--ek-primary));
  color: #fff;
}

.ek-news-byline {
  align-items: center;
  color: rgb(255 255 255 / 0.75);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 1rem;
}

/* -- Single post: featured image ---------------------------------------------------- */

/*
 * Pulled up over the hero band. The negative margin only applies from sm up: on a narrow
 * screen the hero is short and the overlap would crowd the byline.
 */

.ek-news-feature {
  background-color: rgb(var(--ek-surface));
  padding-top: 2rem;
}

@media (min-width: 640px) {
  .ek-news-feature {
    margin-top: -4rem;
    padding-top: 0;
    position: relative;
    z-index: 1;
  }
}

.ek-news-feature__figure {
  margin: 0;
}

.ek-news-feature__img {
  border-radius: 12px;
  box-shadow: 0 10px 40px rgb(0 0 0 / 0.15);
  display: block;
  height: auto;
  width: 100%;
}

.ek-news-feature__caption {
  color: rgb(var(--ek-ink-muted));
  font-size: 0.8125rem;
  margin-top: 0.75rem;
  text-align: center;
}

/* -- Single post: featured image beside the content --------------------------------- */

/*
 * The image column on a standard (non-section-block) post. It sits to the right of the article
 * from lg up and above it on mobile — the markup orders the image first so it is the visual
 * entry point on a phone, and lg:order-* swaps them on desktop.
 */

.ek-news-aside__figure {
  margin: 0;
}

.ek-news-aside__img {
  border-radius: 12px;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.1);
  display: block;
  height: auto;
  width: 100%;
}

.ek-news-aside__caption {
  color: rgb(var(--ek-ink-muted));
  font-size: 0.8125rem;
  line-height: 1.6;
  margin-top: 0.75rem;
}

/*
 * Sticky only from lg, and only where the viewport is tall enough to hold the image without
 * clipping it. position:sticky on a short viewport would pin a tall image and leave part of it
 * permanently off screen.
 */

@media (min-width: 1024px) {
  .ek-news-aside {
    position: sticky;
    top: 7rem;
  }
}

/*
 * Wide media inside the narrower article column must not overflow it. The column itself is the
 * reading measure when an image column is present, so nothing here overrides the centred
 * max-w-3xl fallback used when a post has no featured image — that is applied in the template.
 */

.ek-news-content > .alignwide,
.ek-news-content > .alignfull,
.ek-news-content > figure,
.ek-news-content > .wp-block-image {
  max-width: 100%;
}

/* -- Single post: content ---------------------------------------------------------- */

/*
 * .ek-prose already styles headings, paragraphs and links. These rules add the block types it
 * does not cover, so standard Gutenberg content lands correctly without per-post styling.
 */

.ek-news-content blockquote {
  border-left: 3px solid rgb(var(--ek-primary));
  color: rgb(var(--ek-ink));
  font-size: 1.0625rem;
  font-style: italic;
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
}

.ek-news-content blockquote cite {
  color: rgb(var(--ek-ink-muted));
  display: block;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  margin-top: 0.5rem;
}

.ek-news-content ul,
.ek-news-content ol {
  margin: 1.25rem 0;
  padding-left: 1.5rem;
}

.ek-news-content ul {
  list-style: disc;
}

.ek-news-content ol {
  list-style: decimal;
}

.ek-news-content li + li {
  margin-top: 0.5rem;
}

.ek-news-content img,
.ek-news-content .wp-block-image img {
  border-radius: 10px;
  height: auto;
  max-width: 100%;
}

.ek-news-content figure {
  margin: 2rem 0;
}

.ek-news-content figcaption {
  color: rgb(var(--ek-ink-muted));
  font-size: 0.8125rem;
  margin-top: 0.6rem;
  text-align: center;
}

/* Wide/full alignments must not overflow the reading measure. */

.ek-news-content .alignwide,
.ek-news-content .alignfull {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.ek-news-content table {
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  width: 100%;
}

.ek-news-content th,
.ek-news-content td {
  border: 1px solid rgb(var(--ek-line));
  padding: 0.6rem 0.85rem;
  text-align: left;
}

.ek-news-content pre {
  background-color: rgb(var(--ek-surface-alt));
  border-radius: 10px;
  overflow-x: auto;
  padding: 1rem 1.15rem;
}

.ek-news-pagelinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
}

/*
 * Floating enquiry cart button (Mini Cart for WooCommerce plugin).
 *
 * Sized to a fixed 50px circle and centred, so the icon sits in the middle rather than being
 * positioned by the plugin's own padding. box-sizing is pinned to border-box because the
 * plugin ships `.shopping-cart { padding: 11px }` at a higher source order — under
 * content-box that padding would be added to the 50px and render a ~72px button.
 *
 * See also `div#open` further down, which lifts the button above the theme's fixed layers.
 */

.shopping-cart{
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:5px;
  bottom:2% !important
}

/* -- Small screens ----------------------------------------------------------------- */

@media screen and (max-width:1024px){
  #ektimo-content-image-2{
    padding-top:0px;
  }

  .ekteam-outer{
    padding-top:0px;
  }
}

@media screen and (max-width:767px){
  .ek-team__panel-heading{
    font-size:25px
  }

  .ek-team__filters{
    margin-bottom:20px;
  }

  .ek-team__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin:0 -5px;
    gap:5px;
  }

  .ek-team__grid li{
    padding:0 5px;
  }

  .team-preview{
    padding-top: calc(125% + 25px);
  }

  .ek-team__name{
    font-size:18px;
  }

  .ek-team__position{
    font-size:14px;
  }

  h4.ek-team__panel-heading{
    font-size:18px;
  }
}

@media (max-width: 640px) {
  .ek-news-filters {
    margin-bottom: 1.75rem;
  }

  .ek-news-card__body {
    padding: 1.125rem 1.125rem 1.375rem;
  }

  .ek-news-feature__img {
    border-radius: 10px;
  }
}

/* ======================================================================================
 * Floating enquiry button icon.
 *
 * The Mini Cart for WooCommerce plugin renders the floating button as
 *
 *     <span class="fcp_icon_4" style="font-size:40px;color:#ffffff;"></span>
 *
 * and draws the glyph from its own icon font via
 * assets/public/css/style.css → `.fcp_icon_4:before { content: "\e936" }`.
 *
 * That glyph is replaced here with the uploaded icon-enquiry.svg. The override lives in the
 * theme rather than in the plugin: editing the plugin's stylesheet would be reverted by its
 * next update, and the theme's own rules forbid changing files outside the theme.
 *
 * The SVG is applied as a MASK, not a background-image. icon-enquiry.svg declares no fill, so
 * as a background it would paint black on the button's blue (#3ba9e0) background. Masking
 * paints the shape in `currentColor` instead, which inherits the inline `color:#ffffff` the
 * plugin already prints — so the icon stays white, and it automatically follows the colour
 * configured in the plugin's settings rather than hard-coding it here.
 *
 * The URL is relative to this stylesheet (assets/css/main.css), not site-absolute, so it
 * keeps resolving if the site moves domain or out of its /ektimo/ subdirectory.
 *
 * Nothing else is touched: position, the circular button, its size, hover, the shake
 * animation and all JavaScript behaviour come from the plugin and are left alone.
 * ====================================================================================== */

.fcp_icon_4:before {
  /* Suppress the icon-font glyph; the mask below supplies the artwork. */
  content: "";
  display: inline-block;
  /*
   * Explicit box for the artwork. The SVG's viewBox is 100x125, so a square box left empty
   * space above and below; 45x36 matches the icon's own proportions and the size requested
   * for the button.
   *
   * Fixed pixels rather than 1em: the plugin prints an inline font-size on the span, which
   * would otherwise scale the icon away from these dimensions.
   */
  width: 45px;
  height: 36px;
  vertical-align: middle;
  /* currentColor picks up the plugin's inline color, keeping the icon white on the blue button. */
  background-color: currentColor;
  -webkit-mask-image: url("../../../../uploads/2026/08/icon-enquiry.svg");
  mask-image: url("../../../../uploads/2026/08/icon-enquiry.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  /* contain, so the vector scales crisply at any size or device pixel ratio. */
  -webkit-mask-size: contain;
  mask-size: contain;
}

/*
 * Fallback for browsers without mask support (notably older Firefox without the -webkit-
 * prefix path). The icon renders in its own colours rather than white, which is legible,
 * instead of disappearing entirely.
 */

@supports not ((-webkit-mask-image: url("#")) or (mask-image: url("#"))) {
  .fcp_icon_4:before {
    background-color: transparent;
    background-image: url("../../../../uploads/2026/08/icon-enquiry.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

/* -- Floating enquiry cart: stacking order ------------------------------------------- *
 *
 * `#open` is the fixed floating cart button output site-wide by the Mini Cart for
 * WooCommerce plugin (public/class-whmc-light-public.php), which ships
 * `div.shopping-cart { z-index: 10 }` in its own stylesheet. At 10 the button sits below
 * several of the theme's fixed layers, so it was being covered.
 *
 * This lives in input.css rather than woocommerce.css because the button renders on every
 * page, while woocommerce.css is enqueued only on product/cart/checkout/archive views —
 * a rule placed there would simply not load on the homepage or any content page.
 *
 * `div#open` (0,1,0,1) already outranks the plugin's `div.shopping-cart` (0,0,1,1), so no
 * !important is needed.
 * ------------------------------------------------------------------------------------ */

div#open {
  z-index: 9999;
}

/* -- Footer link hover ---------------------------------------------------------------- *
 *
 * Footer links resolve to the brand cyan on hover rather than white.
 *
 * Scoped to #colophon deliberately. The markup uses Tailwind's `hover:text-white` utility,
 * which is also used in header.php — redefining the utility itself would change the header
 * (and anything else that adopts it later) as a side effect. Overriding it only inside the
 * footer keeps the change where it was asked for.
 *
 * `#colophon` (0,1,0,0) plus the class and pseudo-class outranks the bare utility, so no
 * !important is needed.
 * ------------------------------------------------------------------------------------- */

#colophon a.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: #3ba9e0;
}

.hover\:border-primary:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--ek-primary) / var(--tw-border-opacity, 1));
}

.hover\:bg-surface-alt:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-surface-alt) / var(--tw-bg-opacity, 1));
}

.hover\:text-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
}

.hover\:text-primary-hover:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary-hover) / var(--tw-text-opacity, 1));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.group:hover .group-hover\:translate-x-0\.5 {
  --tw-translate-x: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:text-primary {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
}

.group:hover .group-hover\:text-primary-hover {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary-hover) / var(--tw-text-opacity, 1));
}

@media (min-width: 640px) {
  .sm\:-bottom-10 {
    bottom: -2.5rem;
  }

  .sm\:-right-1 {
    right: -0.25rem;
  }

  .sm\:right-2 {
    right: 0.5rem;
  }

  .sm\:mb-12 {
    margin-bottom: 3rem;
  }

  .sm\:mt-12 {
    margin-top: 3rem;
  }

  .sm\:mt-14 {
    margin-top: 3.5rem;
  }

  .sm\:inline-block {
    display: inline-block;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:aspect-\[4\/5\] {
    aspect-ratio: 4/5;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:h-5 {
    height: 1.25rem;
  }

  .sm\:min-h-\[320px\] {
    min-height: 320px;
  }

  .sm\:min-h-\[500px\] {
    min-height: 500px;
  }

  .sm\:w-12 {
    width: 3rem;
  }

  .sm\:w-5 {
    width: 1.25rem;
  }

  .sm\:w-64 {
    width: 16rem;
  }

  .sm\:w-8 {
    width: 2rem;
  }

  .sm\:max-w-\[260px\] {
    max-width: 260px;
  }

  .sm\:max-w-\[303px\] {
    max-width: 303px;
  }

  .sm\:translate-x-6 {
    --tw-translate-x: 1.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:gap-4 {
    gap: 1rem;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:gap-x-10 {
    -moz-column-gap: 2.5rem;
         column-gap: 2.5rem;
  }

  .sm\:gap-x-12 {
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }

  .sm\:gap-y-8 {
    row-gap: 2rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .sm\:pr-20 {
    padding-right: 5rem;
  }

  .sm\:pt-16 {
    padding-top: 4rem;
  }

  .sm\:text-left {
    text-align: left;
  }

  .sm\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .sm\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .sm\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .sm\:text-\[40px\] {
    font-size: 40px;
  }

  .sm\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 768px) {
  .md\:right-2 {
    right: 0.5rem;
  }

  .md\:mt-0 {
    margin-top: 0px;
  }

  .md\:flex {
    display: flex;
  }

  .md\:h-20 {
    height: 5rem;
  }

  .md\:w-56 {
    width: 14rem;
  }

  .md\:w-\[20\%\] {
    width: 20%;
  }

  .md\:w-\[22\%\] {
    width: 22%;
  }

  .md\:w-\[35\%\] {
    width: 35%;
  }

  .md\:min-w-\[190px\] {
    min-width: 190px;
  }

  .md\:flex-1 {
    flex: 1 1 0%;
  }

  .md\:shrink-0 {
    flex-shrink: 0;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-center {
    align-items: center;
  }

  .md\:justify-between {
    justify-content: space-between;
  }

  .md\:gap-6 {
    gap: 1.5rem;
  }

  .md\:gap-x-0 {
    -moz-column-gap: 0px;
         column-gap: 0px;
  }

  .md\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .md\:py-16 {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .md\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .md\:pt-0 {
    padding-top: 0px;
  }

  .md\:text-start {
    text-align: start;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:leading-\[48px\] {
    line-height: 48px;
  }
}

@media (min-width: 1024px) {
  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-28 {
    top: 7rem;
  }

  .lg\:order-1 {
    order: 1;
  }

  .lg\:order-2 {
    order: 2;
  }

  .lg\:-ml-12 {
    margin-left: -3rem;
  }

  .lg\:-mr-20 {
    margin-right: -5rem;
  }

  .lg\:mb-0 {
    margin-bottom: 0px;
  }

  .lg\:mt-12 {
    margin-top: 3rem;
  }

  .lg\:block {
    display: block;
  }

  .lg\:hidden {
    display: none;
  }

  .lg\:h-10 {
    height: 2.5rem;
  }

  .lg\:min-h-\[540px\] {
    min-height: 540px;
  }

  .lg\:min-h-\[560px\] {
    min-height: 560px;
  }

  .lg\:w-1\/2 {
    width: 50%;
  }

  .lg\:w-\[400px\] {
    width: 400px;
  }

  .lg\:w-\[42\%\] {
    width: 42%;
  }

  .lg\:w-\[45\%\] {
    width: 45%;
  }

  .lg\:w-\[55\%\] {
    width: 55%;
  }

  .lg\:w-\[58\%\] {
    width: 58%;
  }

  .lg\:w-\[61\%\] {
    width: 61%;
  }

  .lg\:translate-x-10 {
    --tw-translate-x: 2.5rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .lg\:grid-cols-\[1fr_auto\] {
    grid-template-columns: 1fr auto;
  }

  .lg\:grid-cols-\[minmax\(0\2c 1fr\)_minmax\(0\2c 1\.4fr\)\] {
    grid-template-columns: minmax(0,1fr) minmax(0,1.4fr);
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:flex-row-reverse {
    flex-direction: row-reverse;
  }

  .lg\:items-end {
    align-items: flex-end;
  }

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:gap-14 {
    gap: 3.5rem;
  }

  .lg\:gap-16 {
    gap: 4rem;
  }

  .lg\:gap-20 {
    gap: 5rem;
  }

  .lg\:gap-8 {
    gap: 2rem;
  }

  .lg\:gap-x-16 {
    -moz-column-gap: 4rem;
         column-gap: 4rem;
  }

  .lg\:self-center {
    align-self: center;
  }

  .lg\:p-10 {
    padding: 2.5rem;
  }

  .lg\:p-12 {
    padding: 3rem;
  }

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-14 {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .lg\:py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .lg\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .lg\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .lg\:\!pb-\[110px\] {
    padding-bottom: 110px !important;
  }

  .lg\:pr-8 {
    padding-right: 2rem;
  }

  .lg\:pt-20 {
    padding-top: 5rem;
  }

  .lg\:text-end {
    text-align: end;
  }

  .lg\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .lg\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .lg\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .lg\:text-6xl {
    font-size: 3.75rem;
    line-height: 1;
  }

  .lg\:text-\[22px\] {
    font-size: 22px;
  }

  .lg\:text-\[40px\] {
    font-size: 40px;
  }

  .lg\:text-\[64px\] {
    font-size: 64px;
  }

  .lg\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .lg\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  .lg\:leading-\[1\.35\] {
    line-height: 1.35;
  }

  .lg\:leading-\[84px\] {
    line-height: 84px;
  }
}

@media (min-width: 1280px) {
  .xl\:mb-0 {
    margin-bottom: 0px;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:h-\[46px\] {
    height: 46px;
  }

  .xl\:columns-1 {
    -moz-columns: 1;
         columns: 1;
  }

  .xl\:columns-2 {
    -moz-columns: 2;
         columns: 2;
  }

  .xl\:pb-3 {
    padding-bottom: 0.75rem;
  }

  .xl\:text-\[84px\] {
    font-size: 84px;
  }
}

.\[\&_a\:hover\]\:border-primary a:hover {
  --tw-border-opacity: 1;
  border-color: rgb(var(--ek-primary) / var(--tw-border-opacity, 1));
}

.\[\&_a\:hover\]\:text-primary a:hover {
  --tw-text-opacity: 1;
  color: rgb(var(--ek-primary) / var(--tw-text-opacity, 1));
}

.\[\&_a\]\:inline-flex a {
  display: inline-flex;
}

.\[\&_a\]\:h-9 a {
  height: 2.25rem;
}

.\[\&_a\]\:items-center a {
  align-items: center;
}

.\[\&_a\]\:rounded-full a {
  border-radius: 9999px;
}

.\[\&_a\]\:border a {
  border-width: 1px;
}

.\[\&_a\]\:border-line a {
  --tw-border-opacity: 1;
  border-color: rgb(var(--ek-line) / var(--tw-border-opacity, 1));
}

.\[\&_a\]\:px-3 a {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.\[\&_a\]\:text-sm a {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.\[\&_a\]\:transition-colors a {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.\[\&_span\]\:inline-flex span {
  display: inline-flex;
}

.\[\&_span\]\:h-9 span {
  height: 2.25rem;
}

.\[\&_span\]\:items-center span {
  align-items: center;
}

.\[\&_span\]\:rounded-full span {
  border-radius: 9999px;
}

.\[\&_span\]\:bg-primary span {
  --tw-bg-opacity: 1;
  background-color: rgb(var(--ek-primary) / var(--tw-bg-opacity, 1));
}

.\[\&_span\]\:px-3 span {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.\[\&_span\]\:text-sm span {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.\[\&_span\]\:text-white span {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}