/* ==========================================================================
   Images Marketing — theme styles
   --------------------------------------------------------------------------
   ONE RULE GOVERNS THIS FILE.

   Elementor sets colour and typography DIRECTLY on its widget elements, e.g.
   `.elementor-widget-heading .elementor-heading-title { color: ... }`.

   A direct rule always beats an inherited value, no matter how specific the
   inherited one is and no matter which stylesheet loads last. So setting a
   colour on a section and expecting the heading inside it to inherit does not
   work — that is what produced a teal headline on a near-black panel in v1.

   Therefore: whenever this file needs a heading, paragraph or link to take a
   colour, it targets THAT ELEMENT, using the same selector shape Elementor
   uses. No specificity arithmetic, no !important, no load-order tricks. The
   file is enqueued normally and behaves the same in the editor as on the page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted variable faces. No third-party request, no CDN.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("../fonts/playfair-display-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 400 900; font-style: italic; font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   Contrast notes (verified, WCAG 2.1 AA):
     aqua-300 on ink ............ 10.28:1   accent text on dark
     aqua-800 on paper ........... 7.18:1   links and accents on light
     paper on ink ............... 17.28:1   body text on dark
     ink on paper ............... 17.28:1   body text on light
   Do NOT use aqua-500 or aqua-600 for text. They fail AA on both grounds.
   -------------------------------------------------------------------------- */
:root {
  --im-aqua-50:#F2FBFB;  --im-aqua-100:#DCF2F2; --im-aqua-200:#B4E5E6;
  --im-aqua-300:#6ED3D3; --im-aqua-400:#46C3C5; --im-aqua-500:#2FB3B6;
  --im-aqua-600:#159A9D; --im-aqua-700:#0B7B7E; --im-aqua-800:#085F62;
  --im-aqua-900:#06373A;

  --im-ink:#14161A;
  --im-ink-80:#3A4048;
  --im-muted:#585F68;
  --im-paper:#FFFFFF;
  --im-paper-warm:#F7F5F2;
  --im-paper-cool:#F2F6F6;
  --im-surface-deep:#06373A;
  --im-signal:#B81D2B;
  --im-line:#E4E0DB;
  --im-line-strong:#6E7680;

  --im-font-display:"Playfair Display", Georgia, "Times New Roman", serif;
  --im-font-text:"Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --im-wrap:1180px;
  --im-radius:10px;
  --im-radius-lg:16px;
  --im-sp-xs:.5rem; --im-sp-sm:.85rem; --im-sp-md:1.25rem;
  --im-sp-lg:2rem;  --im-sp-xl:3.25rem; --im-sp-2xl:5rem;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--im-paper); color:var(--im-ink);
  font-family:var(--im-font-text); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg,video { max-width:100%; height:auto; display:block; }
body a[href] { color:var(--im-aqua-800); }
body a[href]:hover { color:var(--im-aqua-900); }

h1,h2,h3,h4,h5,h6 { margin:0 0 var(--im-sp-md); text-wrap:balance; }

:focus-visible { outline:3px solid var(--im-ink); outline-offset:2px; }
.im-on-dark :focus-visible,
.im-surface-ink :focus-visible,
.im-surface-deep :focus-visible { outline-color:var(--im-paper); }

.im-visually-hidden {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.im-skip-link {
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--im-ink); color:var(--im-paper); padding:.75rem 1.25rem;
}
.im-skip-link:focus { left:0; }
.im-display-xl,
.elementor .elementor-element.im-display-xl .elementor-heading-title,
.elementor .elementor-element.im-display-xl :is(h1,h2,h3,h4,h5,h6),
.im-display-lg,
.elementor .elementor-element.im-display-lg .elementor-heading-title,
.elementor .elementor-element.im-display-lg :is(h1,h2,h3,h4,h5,h6),
.im-h2,
.elementor .elementor-element.im-h2 .elementor-heading-title,
.elementor .elementor-element.im-h2 :is(h1,h2,h3,h4,h5,h6),
.im-h3--display,
.elementor .elementor-element.im-h3--display .elementor-heading-title,
.elementor .elementor-element.im-h3--display :is(h1,h2,h3,h4,h5,h6),
.im-quote,
.elementor .elementor-element.im-quote .elementor-heading-title,
.elementor .elementor-element.im-quote :is(h1,h2,h3,h4,h5,h6) {
  font-family:var(--im-font-display); font-weight:500; letter-spacing:-.015em;
}
.im-display-xl,
.elementor .elementor-element.im-display-xl .elementor-heading-title,
.elementor .elementor-element.im-display-xl :is(h1,h2,h3,h4,h5,h6) {
  font-size:clamp(2.6rem,5.4vw,4.35rem); line-height:1.04;
}
.im-display-lg,
.elementor .elementor-element.im-display-lg .elementor-heading-title,
.elementor .elementor-element.im-display-lg :is(h1,h2,h3,h4,h5,h6) {
  font-size:clamp(2.1rem,4vw,3.15rem); line-height:1.08;
}
.im-h2,
.elementor .elementor-element.im-h2 .elementor-heading-title,
.elementor .elementor-element.im-h2 :is(h1,h2,h3,h4,h5,h6) {
  font-size:clamp(1.6rem,2.7vw,2.25rem); line-height:1.16;
}
.im-h3,
.elementor .elementor-element.im-h3 .elementor-heading-title,
.elementor .elementor-element.im-h3 :is(h1,h2,h3,h4,h5,h6) {
  font-size:1.2rem; line-height:1.3; font-weight:600; letter-spacing:-.005em;
}
.im-h3--display,
.elementor .elementor-element.im-h3--display .elementor-heading-title,
.elementor .elementor-element.im-h3--display :is(h1,h2,h3,h4,h5,h6) {
  font-size:clamp(1.3rem,2vw,1.6rem); font-weight:500;
}
.im-h4,
.elementor .elementor-element.im-h4 .elementor-heading-title,
.elementor .elementor-element.im-h4 :is(h1,h2,h3,h4,h5,h6) {
  font-size:1.02rem; font-weight:600; line-height:1.35;
}
/* The eyebrow sets a COLOUR as well as a size, so the middle selector has to
   outrank Elementor's heading rule rather than tie with it — hence the
   compounded .elementor-widget-heading. */
.im-eyebrow,
.elementor .im-eyebrow.elementor-widget-heading .elementor-heading-title,
.elementor .elementor-element.im-eyebrow .elementor-heading-title,
.elementor .elementor-element.im-eyebrow :is(h1,h2,h3,h4,h5,h6) {
  display:block; font-family:var(--im-font-text);
  font-size:.775rem; line-height:1.3; letter-spacing:.14em; font-weight:600;
  text-transform:uppercase; color:var(--im-aqua-800);
  margin-bottom:var(--im-sp-sm);
}
.im-lede, .im-lede p {
  font-size:clamp(1.08rem,1.5vw,1.28rem); line-height:1.55;
  color:var(--im-ink-80); max-width:46em;
}
.im-prose p { margin:0 0 1.05em; max-width:44em; }
.im-prose p:last-child { margin-bottom:0; }
.im-prose ul, .im-prose ol { max-width:44em; padding-left:1.15rem; }
.im-prose li { margin-bottom:.4em; }
.im-small, .im-small p { font-size:.9rem; color:var(--im-muted); }
.im-quote,
.elementor .elementor-element.im-quote .elementor-heading-title,
.elementor .elementor-element.im-quote :is(h1,h2,h3,h4,h5,h6) {
  font-size:clamp(1.35rem,2.4vw,1.95rem); line-height:1.32; font-style:italic;
}
.im-rule { height:1px; background:var(--im-line); border:0; margin:var(--im-sp-lg) 0; }

/* Elementor's own heading node, where no im- class is present. Carried to
   (0,3,0) by the .elementor wrapper so it beats, rather than ties, Elementor's
   global-colour binding. */
body .elementor .elementor-widget-heading .elementor-heading-title { color:var(--im-ink); }
.elementor-widget-text-editor { color:var(--im-ink-80); }
.elementor-widget:not(:last-child) { margin-bottom:0; }

/* --------------------------------------------------------------------------
   Sections and surfaces
   -------------------------------------------------------------------------- */
.im-section  { padding-block:var(--im-sp-2xl); }
.im-section-tight { padding-block:var(--im-sp-xl); }
.im-wrap, .e-con-boxed > .e-con-inner { max-width:var(--im-wrap); margin-inline:auto; }

.im-surface-warm  { background:var(--im-paper-warm); }
.im-surface-tint  { background:var(--im-paper-cool); }
.im-surface-field { background:var(--im-aqua-100); }
.im-surface-field-loud { background:var(--im-aqua-200); }
.im-surface-field-logo { background:var(--im-aqua-100); }
.im-surface-ink   { background:var(--im-ink); }
.im-surface-deep  { background:var(--im-surface-deep); }

/* --------------------------------------------------------------------------
   DARK SURFACES — the rules v1 got wrong.
   Every element that carries text is named explicitly. Nothing relies on
   inheritance, so Elementor's own direct rules cannot silently win.
   -------------------------------------------------------------------------- */
.im-on-dark, .im-surface-ink, .im-surface-deep { color:var(--im-paper); }

/* Specificity note, and it is the whole reason v1 failed.
   Elementor binds headings to its global Primary colour with
   `.elementor-widget-heading .elementor-heading-title` — (0,2,0). A rule of
   (0,2,0) here only TIES, and a tie is decided by load order: the theme wins on
   the front end and loses in the editor, where Elementor injects its CSS after
   the page loads. That is exactly how the same page came out white on the site
   and teal in the editor. Including .elementor-widget-heading takes these to
   (0,3,0), which wins outright in both places without !important. */
.elementor .im-on-dark .elementor-widget-heading .elementor-heading-title,
.elementor .im-surface-ink .elementor-widget-heading .elementor-heading-title,
.elementor .im-surface-deep .elementor-widget-heading .elementor-heading-title,
.im-on-dark h1, .im-on-dark h2, .im-on-dark h3, .im-on-dark h4,
.im-surface-ink h1, .im-surface-ink h2, .im-surface-ink h3, .im-surface-ink h4,
.im-surface-deep h1, .im-surface-deep h2, .im-surface-deep h3, .im-surface-deep h4 {
  color:var(--im-paper);
}

.im-on-dark .elementor-widget-text-editor,
.im-on-dark .elementor-widget-text-editor p,
.im-on-dark .im-lede, .im-on-dark .im-lede p,
.im-on-dark .im-prose p, .im-on-dark li,
.im-surface-ink .elementor-widget-text-editor,
.im-surface-ink .elementor-widget-text-editor p,
.im-surface-ink .im-lede, .im-surface-ink .im-lede p,
.im-surface-ink .im-prose p, .im-surface-ink li,
.im-surface-deep .elementor-widget-text-editor,
.im-surface-deep .elementor-widget-text-editor p,
.im-surface-deep .im-lede, .im-surface-deep .im-lede p,
.im-surface-deep .im-prose p, .im-surface-deep li {
  color:var(--im-paper);
}

.im-on-dark .im-eyebrow, .im-on-dark .im-surface-ink .im-eyebrow, .im-surface-ink .im-surface-deep .im-eyebrow, .im-surface-deep .im-on-dark a[href], .im-surface-ink a[href], .im-surface-deep a[href] {
  color:var(--im-aqua-300);
}
.im-on-dark a[href]:hover, .im-surface-ink a[href]:hover, .im-surface-deep a[href]:hover {
  color:var(--im-aqua-200);
}
.im-on-dark .im-small, .im-on-dark .im-small p { color:var(--im-aqua-100); }
.im-on-dark .im-rule, .im-surface-ink .im-rule, .im-surface-deep .im-rule {
  background:rgba(255,255,255,.22);
}

/* Light accent surfaces keep dark text; the eyebrow needs a darker aqua. */
.im-surface-field .im-eyebrow, .im-surface-field .im-surface-field-loud .im-eyebrow, .im-surface-field-loud .im-surface-field-logo .im-eyebrow, .elementor .im-surface-field-logo .im-eyebrow .elementor-heading-title {
  color:var(--im-aqua-900);
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */
/*
 * WHERE THE GRID GOES: THE INNER WRAPPER, NOT THE ELEMENT.
 *
 * An Elementor container set to BOXED width does not hold its children
 * directly. It renders as:
 *
 *   <div class="e-con e-con-boxed im-cols im-cols--3">
 *     <div class="e-con-inner">  <-- the three children live in here
 *
 * Put `display:grid` on the outer element and the grid gets exactly ONE item:
 * that wrapper. With three columns declared, the wrapper lands in column one at
 * a third of the width, and the real content stacks inside it — a narrow column
 * of text with two thirds of the section empty beside it.
 *
 * Every grid container in these pages is boxed except im-steps__item, which is
 * full width — and that was the one layout that came out correct, which is what
 * pointed at this.
 *
 * So each rule below targets two cases: the element itself when it is NOT boxed
 * (children are direct), and the inner wrapper when it IS.
 */
.elementor-element.im-cols:not(.e-con-boxed),
.elementor-element.im-cols.e-con-boxed > .e-con-inner {
  display:grid; gap:var(--im-sp-lg);
}
.elementor-element.im-cols--2:not(.e-con-boxed),
.elementor-element.im-cols--2.e-con-boxed > .e-con-inner {
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.elementor-element.im-cols--3:not(.e-con-boxed),
.elementor-element.im-cols--3.e-con-boxed > .e-con-inner {
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.elementor-element.im-cols--4:not(.e-con-boxed),
.elementor-element.im-cols--4.e-con-boxed > .e-con-inner {
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.elementor-element.im-split:not(.e-con-boxed),
.elementor-element.im-split.e-con-boxed > .e-con-inner {
  display:grid; gap:var(--im-sp-xl);
  grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center;
}
.elementor-element.im-cap-grid:not(.e-con-boxed),
.elementor-element.im-cap-grid.e-con-boxed > .e-con-inner {
  display:grid; gap:var(--im-sp-lg);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.elementor-element.im-cap { display:flex; flex-direction:column; gap:var(--im-sp-xs); }

/* --------------------------------------------------------------------------
   Heroes
   -------------------------------------------------------------------------- */
.im-hero { padding-block:var(--im-sp-2xl); }
.elementor-element.im-hero-grid:not(.e-con-boxed),
.elementor-element.im-hero-grid.e-con-boxed > .e-con-inner {
  display:grid; gap:var(--im-sp-xl);
  grid-template-columns:1.15fr .85fr; align-items:center;
}
.im-hero-page--media .elementor-element.im-hero-grid:not(.e-con-boxed),
.im-hero-page--media .elementor-element.im-hero-grid.e-con-boxed > .e-con-inner { grid-template-columns:1fr 1fr; }
.im-hero-media img, .im-hero__media img { border-radius:var(--im-radius-lg); }
.im-hero__banner { border-radius:var(--im-radius-lg); overflow:hidden; }

/* Cover heroes: the background must always fill, whatever image is dropped in.
   Matching Elementor's own per-element specificity (0,3,0) means a deliberate
   override in the editor still wins, but the default is fill, every time. */
.im-hero-home, .im-hero-cover,
.elementor .elementor-element.im-hero-home,
.elementor .elementor-element.im-hero-cover {
  background-size:cover; background-position:center center; background-repeat:no-repeat;
}
.elementor-element.im-hero-home { position:relative; min-height:clamp(440px,62vh,760px); display:flex; align-items:flex-end; }
.im-hero-home__panel {
  background:var(--im-ink); border-top:6px solid var(--im-aqua-300);
  padding:var(--im-sp-xl); max-width:680px;
  margin-block:var(--im-sp-xl);
}

/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */
.im-card {
  background:var(--im-paper); border:1px solid var(--im-line);
  border-radius:var(--im-radius); padding:var(--im-sp-lg); height:100%;
}
.im-card__body p { margin:0 0 .8em; }
.im-card__body p:last-child { margin-bottom:0; }
.im-on-dark .im-card, .im-surface-ink .im-card, .im-surface-deep .im-card {
  background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.18);
}

.elementor-element.im-steps:not(.e-con-boxed),
.elementor-element.im-steps.e-con-boxed > .e-con-inner { display:grid; gap:var(--im-sp-lg); }
/* A fixed first track, not `auto`. Elementor gives every child container
   width:100%, so an `auto` track sizes to that 100% and the number column
   swallows half the page — which is the enormous gap between the step numbers
   and their text. The explicit width on the number column is the other half of
   the same fix. */
.elementor-element.im-steps__item:not(.e-con-boxed),
.elementor-element.im-steps__item.e-con-boxed > .e-con-inner {
  display:grid; grid-template-columns:3.25rem 1fr; gap:var(--im-sp-md); align-items:start;
}
.elementor-element.im-steps__numcol { display:flex; width:auto; }
.im-steps__num {
  font-family:var(--im-font-display); font-size:1.5rem; line-height:1;
  color:var(--im-aqua-800); min-width:2.5rem;
}
.im-on-dark .im-steps__num, .im-surface-deep .im-steps__num { color:var(--im-aqua-300); }
.im-steps__text p { margin:0; }

.elementor-element.im-values:not(.e-con-boxed),
.elementor-element.im-values.e-con-boxed > .e-con-inner { display:grid; gap:var(--im-sp-lg); }
.im-values__item { padding-top:var(--im-sp-md); border-top:1px solid rgba(255,255,255,.22); }

/* --------------------------------------------------------------------------
   Buttons and link arrows
   Colour is set on the anchor itself, which is what Elementor styles.
   -------------------------------------------------------------------------- */
.im-btn .elementor-button, a.im-btn,
.im-btn-solid .elementor-button {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--im-font-text); font-size:.85rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:1rem 1.9rem; border-radius:2px; border:2px solid transparent;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* SPECIFICITY, AGAIN — the same arithmetic as the headings, and it bit twice.
 *
 * Elementor's kit styles links as `.elementor-kit-N a` (0,1,1) and buttons as
 * `.elementor-kit-N .elementor-button` (0,2,0). This kit's link colour is
 * #085F62, which is ALSO this theme's button background. So `a.im-btn--primary`
 * at (0,1,1) merely TIED, the kit's file loaded last and won, and the button
 * rendered dark teal text on a dark teal fill — an invisible button, with a
 * lighter teal on hover from link_hover_color.
 *
 * Every rule below is compounded to outrank the kit outright rather than tie
 * with it: .elementor-widget-button carries widget buttons to (0,3,0), and the
 * doubled class carries plain anchors in the templates to (0,2,1). */
.im-btn--primary.elementor-widget-button .elementor-button,
a.im-btn.im-btn--primary {
  background:var(--im-aqua-800); color:var(--im-paper); border-color:var(--im-aqua-800);
}
.im-btn--primary.elementor-widget-button .elementor-button:hover,
.im-btn--primary.elementor-widget-button .elementor-button:focus-visible,
a.im-btn.im-btn--primary:hover,
a.im-btn.im-btn--primary:focus-visible {
  background:var(--im-aqua-900); border-color:var(--im-aqua-900); color:var(--im-paper);
}
/* On dark surfaces the primary button inverts to the light aqua with dark ink,
   which reads at 10.28:1 rather than the 2.2:1 a mid aqua would give. */
.im-on-dark .im-btn--primary.elementor-widget-button .elementor-button,
.im-surface-ink .im-btn--primary.elementor-widget-button .elementor-button,
.im-surface-deep .im-btn--primary.elementor-widget-button .elementor-button,
.im-on-dark a.im-btn.im-btn--primary {
  background:var(--im-aqua-300); color:var(--im-ink); border-color:var(--im-aqua-300);
}
.im-on-dark .im-btn--primary.elementor-widget-button .elementor-button:hover,
.im-surface-ink .im-btn--primary.elementor-widget-button .elementor-button:hover,
.im-surface-deep .im-btn--primary.elementor-widget-button .elementor-button:hover,
.im-on-dark a.im-btn.im-btn--primary:hover {
  background:var(--im-aqua-200); border-color:var(--im-aqua-200); color:var(--im-ink);
}

/* The link arrow is the case where the kit's button BACKGROUND showed through
   as a solid teal box behind an italic text link. Compounded for the same
   reason as above. */
.im-link-arrow.elementor-widget-button .elementor-button,
a.im-link-arrow.im-link-arrow {
  background:none; border:0; padding:0; text-decoration:none;
  font-family:var(--im-font-text); font-size:.85rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; font-style:italic;
  color:var(--im-aqua-800); border-bottom:1px solid currentColor; border-radius:0;
}
.im-link-arrow.elementor-widget-button .elementor-button:hover,
a.im-link-arrow.im-link-arrow:hover { color:var(--im-aqua-900); }
.im-on-dark .im-link-arrow.elementor-widget-button .elementor-button,
.im-surface-ink .im-link-arrow.elementor-widget-button .elementor-button,
.im-surface-deep .im-link-arrow.elementor-widget-button .elementor-button,
.im-on-dark a.im-link-arrow.im-link-arrow {
  color:var(--im-aqua-300); background:none;
}
.im-on-dark .im-link-arrow.elementor-widget-button .elementor-button:hover,
.im-on-dark a.im-link-arrow.im-link-arrow:hover { color:var(--im-aqua-200); }

/* --------------------------------------------------------------------------
   Site chrome — header, nav, footer
   -------------------------------------------------------------------------- */
.im-header {
  background:var(--im-paper); border-bottom:1px solid var(--im-line);
  position:sticky; top:0; z-index:50;
}
.admin-bar .im-header { top:32px; }
.im-header__inner {
  max-width:var(--im-wrap); margin-inline:auto; padding:.9rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between; gap:var(--im-sp-lg);
}
/* The brand renders as a link containing either img.im-brand__img or, with no
   logo set, a text wordmark. Both are constrained here — an unstyled logo at
   its natural 334px would burst the header open. WordPress's own
   .custom-logo markup is covered too, in case anything emits it directly. */
.im-brand { display:inline-block; line-height:0; text-decoration:none; }
.im-brand.im-brand--text {
  font-family:var(--im-font-display); font-size:1.3rem; line-height:1.2;
  color:var(--im-ink);
}
.im-header__inner .im-brand__img,
.im-header__inner img.custom-logo,
.im-brand img { max-height:46px; width:auto; height:auto; }

/* Footer brand: the reversed logo, a little larger, on the dark ground. */
.im-footer__brand { margin-bottom:var(--im-sp-md); }
.im-footer__brand .im-brand__img { max-height:52px; width:auto; height:auto; }
.im-footer__brand.im-brand--text { color:var(--im-paper); font-size:1.45rem; }

/* If only the light logo exists, invert it rather than show dark-on-dark. */
.im-brand__img--reverse { filter:brightness(0) invert(1); }

.im-nav ul { display:flex; gap:var(--im-sp-lg); list-style:none; margin:0; padding:0; align-items:center; }
.im-nav a[href] {
  text-decoration:none; color:var(--im-ink); font-size:.95rem; font-weight:500;
  padding-block:.35rem; border-bottom:2px solid transparent;
}
.im-nav a[href]:hover, .im-nav .current-menu-item > a[href], .im-nav a[aria-current="page"] {
  color:var(--im-aqua-900); border-bottom-color:var(--im-aqua-600);
}
.im-nav .sub-menu {
  display:none; position:absolute; background:var(--im-paper);
  border:1px solid var(--im-line); padding:.5rem 0; min-width:15rem; flex-direction:column; gap:0;
}
.im-nav li { position:relative; }
.im-nav li:hover > .sub-menu, .im-nav li:focus-within > .sub-menu { display:flex; }
.im-nav .sub-menu a[href] { padding:.5rem 1rem; display:block; border:0; }

.im-nav-toggle {
  display:none; background:none; border:1px solid var(--im-line);
  border-radius:4px; padding:.5rem .7rem; color:var(--im-ink); cursor:pointer;
}
.im-header__cta .im-btn { white-space:nowrap; }

.im-footer { background:var(--im-ink); color:var(--im-paper); padding-block:var(--im-sp-xl); }
.im-footer a[href] { color:var(--im-aqua-300); text-decoration:none; }
.im-footer a[href]:hover { color:var(--im-aqua-200); text-decoration:underline; }
.im-footer__inner { max-width:var(--im-wrap); margin-inline:auto; padding-inline:1.25rem; display:grid; gap:var(--im-sp-lg); grid-template-columns:1.4fr 1fr 1fr; }
.im-footer h2, .im-footer h3 { color:var(--im-paper); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-family:var(--im-font-text); }
.im-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.im-footer__legal {
  max-width:var(--im-wrap); margin:var(--im-sp-lg) auto 0; padding:var(--im-sp-md) 1.25rem 0;
  border-top:1px solid rgba(255,255,255,.18); font-size:.85rem; color:var(--im-aqua-100);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:1024px) {
  .elementor-element.im-cols--4:not(.e-con-boxed),
  .elementor-element.im-cols--4.e-con-boxed > .e-con-inner { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .elementor-element.im-hero-grid:not(.e-con-boxed),
  .elementor-element.im-hero-grid.e-con-boxed > .e-con-inner,
  .elementor-element.im-split:not(.e-con-boxed),
  .elementor-element.im-split.e-con-boxed > .e-con-inner { grid-template-columns:1fr; gap:var(--im-sp-lg); }
  .im-footer__inner { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  :root { --im-sp-2xl:3.25rem; --im-sp-xl:2.25rem; }
  .elementor-element.im-cols--2:not(.e-con-boxed),
  .elementor-element.im-cols--2.e-con-boxed > .e-con-inner,
  .elementor-element.im-cols--3:not(.e-con-boxed),
  .elementor-element.im-cols--3.e-con-boxed > .e-con-inner,
  .elementor-element.im-cols--4:not(.e-con-boxed),
  .elementor-element.im-cols--4.e-con-boxed > .e-con-inner,
  .elementor-element.im-cap-grid:not(.e-con-boxed),
  .elementor-element.im-cap-grid.e-con-boxed > .e-con-inner { grid-template-columns:1fr; }
  .im-footer__inner { grid-template-columns:1fr; }
  .im-hero-home { min-height:0; }
  .im-hero-home__panel { max-width:none; padding:var(--im-sp-lg); }
  .im-nav { display:none; }
  .im-nav.is-open { display:block; position:absolute; top:100%; left:0; right:0; background:var(--im-paper); border-bottom:1px solid var(--im-line); padding:var(--im-sp-md); }
  .im-nav.is-open ul { flex-direction:column; align-items:flex-start; gap:var(--im-sp-sm); }
  .im-nav.is-open .sub-menu { position:static; display:flex; border:0; padding-left:var(--im-sp-md); }
  .im-nav-toggle { display:inline-flex; }
  .im-header__cta { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}