/* ===========================================================================
   Elementor layer: structure guards, the section tones, and the widget
   vocabulary (kicker / title / lede / body / buttons / lists / frames / FAQ)
   every page is written in.

   The PHP fallback templates emit Elementor-shaped markup inside `.elementor`,
   so every rule here serves the builder page and the fallback alike.

   Specificity: Elementor's kit styles headings, text and buttons at (0,3,0)
   and, inside the editor iframe, loads AFTER the theme. `body .elementor …`
   reaches (0,3,1): enough to beat the kit, not enough to beat the owner's own
   per-widget style controls at (0,4,0). No !important here — it would
   silently break those controls.

   Elementor 4 ("optimized markup") drops `.elementor-widget-container`, so no
   rule below depends on it: measures and alignment sit on the heading, the
   paragraphs and the button wrapper, which exist in both versions.
   =========================================================================== */

/* --------------------------------------------------------------- structure */

/* Sections and columns stay `relative`: the editor gives every section an
   absolutely-positioned .elementor-background-overlay, and releasing those to
   the .elementor wrapper stacks invisible sheets over the page. */
body .elementor .elementor-section{position:relative}
body .elementor .elementor-column{position:relative}
body .elementor .elementor-section.elementor-section-boxed > .elementor-container{
  max-width:var(--container);padding-inline:var(--gutter);position:relative;z-index:2;
}
body .elementor .elementor-section.elementor-section-full_width > .elementor-container{max-width:none}
body .elementor .elementor-column > .elementor-widget-wrap{padding:0;align-content:flex-start}
body .elementor .elementor-widget:not(:last-child){margin-bottom:1.25rem}
/* Widgets are flex items (min-width:auto): without this, the intrinsic width
   of anything wide inside one propagates up and blows the column out on phones. */
body .elementor .elementor-widget,body .elementor .elementor-column{min-width:0}
/* The text-editor wrapper exists only in the editor; on the live page the
   HTML is the widget's direct child. Never put layout on the widget itself. */
body .elementor .elementor-widget-text-editor{display:block}

body .elementor .col-middle > .elementor-widget-wrap{align-content:center;height:100%}
body .elementor .col-end > .elementor-widget-wrap{justify-content:flex-end}

/* gutters between side-by-side columns; the container gives back what the
   columns take, so outer edges line up with every other band */
body .elementor .cols-gap > .elementor-container > .elementor-column{padding-inline:calc(var(--mel-gap) / 2)}
body .elementor .elementor-section.cols-gap > .elementor-container{padding-inline:calc(var(--gutter) - var(--mel-gap) / 2)}
body .elementor .cols-gap-lg > .elementor-container > .elementor-column{padding-inline:clamp(1rem, 2.6vw, 3rem)}
body .elementor .elementor-section.cols-gap-lg > .elementor-container{padding-inline:calc(var(--gutter) - clamp(1rem, 2.6vw, 3rem))}

/* Elementor stacks columns at 767. Two-column story sections are cramped
   between 768 and 1024, so these stack at Elementor's tablet breakpoint too. */
@media (max-width:1024px){
  body .elementor .stack-tablet > .elementor-container{flex-wrap:wrap}
  body .elementor .stack-tablet > .elementor-container > .elementor-column{width:100%}
  body .elementor .stack-tablet > .elementor-container > .elementor-column + .elementor-column{margin-top:2.75rem}
}
@media (max-width:767px){
  body .elementor .elementor-section > .elementor-container > .elementor-column + .elementor-column{margin-top:2rem}
  body .elementor .cols-gap > .elementor-container > .elementor-column{padding-inline:0}
  body .elementor .elementor-section.cols-gap > .elementor-container{padding-inline:var(--gutter)}
  body .elementor .cols-gap-lg > .elementor-container > .elementor-column{padding-inline:0}
  body .elementor .elementor-section.cols-gap-lg > .elementor-container{padding-inline:var(--gutter)}
}

/* ------------------------------------------------------------------ tones */

body .elementor .sec{padding-block:var(--section-y)}
body .elementor .sec-flush-top{padding-top:0}

body .elementor .sec-paper{background-color:var(--paper);color:var(--text)}
body .elementor .sec-mist{background-color:var(--mist);color:var(--text)}
/* the brand band: Matt's blue, bright at one corner — used sparingly */
body .elementor .sec-blue{
  background:radial-gradient(60% 90% at 100% 0%,rgba(54,197,240,.28),rgba(54,197,240,0) 60%),var(--grad-blue);
  color:var(--white);
}
/* two bands of the same tone run on as one */
body .elementor .sec-mist + .sec-mist,body .elementor .sec-paper + .sec-paper{border-top:0}
body .elementor .sec-paper + .sec-paper.sec-flush-top,body .elementor .sec-mist + .sec-mist.sec-flush-top{padding-top:0}

/* ------------------------------------------------------------- typography */

body .elementor .elementor-widget-heading .elementor-heading-title{
  font-family:var(--font-display);font-weight:800;line-height:var(--lh-display);letter-spacing:-.005em;
  text-transform:none;color:var(--text);margin:0;
}
body .elementor .elementor-widget-heading .elementor-heading-title a{color:inherit;text-decoration:none}
/* (0,3,1): the kit sets text-widget colour AND font family (Roboto by default) */
body .elementor .elementor-widget.elementor-widget-text-editor{
  color:var(--text-2);font-family:var(--font-text);font-size:var(--fs-body);font-weight:400;line-height:1.72;
}
body .elementor .elementor-widget-text-editor p{text-wrap:pretty}
body .elementor .elementor-widget-text-editor p:last-child{margin-bottom:0}
body .elementor .elementor-widget-text-editor a{color:var(--blue);font-weight:600}
body .elementor .elementor-widget-text-editor a:hover{color:var(--blue-hi)}
body .elementor .elementor-widget-text-editor strong{color:var(--text);font-weight:700}

/* kicker: mono caps after a short live wire */
body .elementor .kicker .elementor-heading-title{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--font-mono);font-size:var(--fs-kicker);font-weight:700;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);
}
body .elementor .kicker .elementor-heading-title::before{
  content:"";width:28px;height:3px;flex:none;border-radius:3px;background:var(--spark-lo);
}
body .elementor .elementor-widget.kicker{margin-bottom:1rem}
body .elementor .center.kicker .elementor-heading-title::after{content:"";width:28px;height:3px;flex:none;border-radius:3px;background:var(--spark-lo)}

/* display titles: condensed caps; <em> is the electric half of the line */
body .elementor .title .elementor-heading-title{font-size:var(--fs-h2);text-transform:uppercase;max-width:20ch;text-wrap:balance}
body .elementor .title .elementor-heading-title em{font-style:normal;color:var(--blue);
  background:linear-gradient(transparent 64%,rgba(252,220,37,.75) 64%,rgba(252,220,37,.75) 90%,transparent 90%)}
body .elementor .title-page .elementor-heading-title{font-size:var(--fs-h1);line-height:.95;max-width:18ch}
body .elementor .title-md .elementor-heading-title{font-size:clamp(1.9rem, 1.4rem + 1.8vw, 2.9rem)}
body .elementor .elementor-widget.title{margin-bottom:1.2rem}

body .elementor .lede{font-family:var(--font-text);font-size:var(--fs-lede);font-weight:400;line-height:1.55;color:var(--text)}
body .elementor .lede p{max-width:54ch}
body .elementor .body p{max-width:min(64ch,100%)}
body .elementor .elementor-widget.lede{margin-bottom:2rem}

body .elementor .center{text-align:center}
body .elementor .center .elementor-heading-title{margin-inline:auto}
body .elementor .center p{margin-inline:auto}
body .elementor .center .elementor-button-wrapper{text-align:center}
body .elementor .kicker.center .elementor-heading-title{justify-content:center}

/* the editorial head: kicker and H2 left, the intro right, on one baseline */
body .elementor .head-split > .elementor-container{align-items:flex-end}
body .elementor .head-split .elementor-widget.title{margin-bottom:0}
body .elementor .head-split-side > .elementor-widget-wrap{padding-bottom:.4rem}
body .elementor .head-split .elementor-widget.lede{margin-bottom:.5rem}
body .elementor .lede-side p{max-width:44ch;font-size:clamp(1.02rem, .96rem + .3vw, 1.18rem);color:var(--text-2)}
@media (max-width:767px){
  body .elementor .head-split > .elementor-container > .elementor-column + .elementor-column{margin-top:1rem}
}

/* ------------------------------------------------- colour grounds (blue, the dusk scene) */

body .elementor :is(.sec-blue,.hero,.sec-demo,.mel-el-ctaband) .elementor-heading-title{color:var(--white)}
body .elementor :is(.sec-blue,.hero,.sec-demo,.mel-el-ctaband) .kicker .elementor-heading-title{color:var(--spark)}
body .elementor :is(.sec-blue,.hero,.sec-demo,.mel-el-ctaband) .kicker .elementor-heading-title::before,
body .elementor :is(.sec-blue,.hero,.sec-demo,.mel-el-ctaband) .kicker .elementor-heading-title::after{background:var(--spark)}
body .elementor :is(.sec-blue,.hero,.sec-demo,.mel-el-ctaband) .title .elementor-heading-title em{color:var(--spark);background:none}
body .elementor :is(.sec-blue,.hero,.sec-demo,.mel-el-ctaband) .elementor-widget-text-editor{color:rgba(255,255,255,.86)}
body .elementor :is(.sec-blue,.hero,.sec-demo,.mel-el-ctaband) .lede{color:var(--white)}
body .elementor .sec-blue .elementor-widget-text-editor strong{color:var(--white)}
body .elementor :is(.sec-blue,.sec-demo) .elementor-widget-text-editor a{color:var(--spark)}

/* ----------------------------------------------------------------- buttons */

body .elementor .elementor-widget-button .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:56px;padding:.8rem 1.55rem;
  border:2px solid var(--spark);border-radius:var(--r-sm);
  background:var(--spark);color:var(--night);
  font-family:var(--font-display);font-size:1.14rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;line-height:1.1;
  text-decoration:none;position:relative;overflow:hidden;isolation:isolate;
  box-shadow:var(--shadow-spark);
  transition:transform .2s var(--ease),background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease);
}
/* a surge of light sweeps across on hover */
body .elementor .elementor-widget-button .elementor-button::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0));
  transform:skewX(-18deg);transition:left .5s var(--ease);
}
body .elementor .elementor-widget-button .elementor-button:hover{color:var(--night);transform:translateY(-2px);box-shadow:0 16px 38px -12px rgba(252,220,37,.85)}
body .elementor .elementor-widget-button .elementor-button:hover::before{left:115%}
body .elementor .elementor-button .elementor-button-text{display:inline-flex;align-items:center;gap:.55rem}
body .elementor .btnw-arrow .elementor-button .elementor-button-text::after{
  content:"";width:1.05em;height:1.05em;flex:none;background:currentColor;
  -webkit-mask:url("../img/ic/arrow.svg") center / contain no-repeat;
          mask:url("../img/ic/arrow.svg") center / contain no-repeat;
  transition:transform .2s var(--ease);
}
body .elementor .btnw-arrow .elementor-button:hover .elementor-button-text::after{transform:translateX(3px)}
/* the call buttons carry a phone glyph */
body .elementor .btnw-call .elementor-button .elementor-button-text::before{
  content:"";width:1.1em;height:1.1em;flex:none;background:currentColor;
  -webkit-mask:url("../img/ic/phone.svg") center / contain no-repeat;
          mask:url("../img/ic/phone.svg") center / contain no-repeat;
}

body .elementor .btnw-spark .elementor-button{background:var(--spark);border-color:var(--spark);color:var(--night)}
body .elementor .btnw-ghost .elementor-button{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);color:var(--white);box-shadow:none;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body .elementor .btnw-ghost .elementor-button:hover{border-color:var(--white);background:rgba(255,255,255,.18);color:var(--white)}
body .elementor .btnw-outline .elementor-button{background:var(--white);border-color:var(--line-strong);color:var(--blue);box-shadow:var(--shadow-1)}
body .elementor .btnw-outline .elementor-button:hover{border-color:var(--blue);color:var(--blue);box-shadow:var(--shadow-blue)}
body .elementor .btnw-navy .elementor-button{background:var(--blue);border-color:var(--blue);color:var(--white);box-shadow:0 16px 34px -20px rgba(3,82,123,.9)}
body .elementor .btnw-navy .elementor-button:hover{color:var(--white);background:var(--blue-hi);border-color:var(--blue-hi);box-shadow:0 16px 34px -16px rgba(3,82,123,.9)}
body .elementor .btnw-link .elementor-button{
  min-height:0;padding:.4rem 0;background:transparent;border:0;box-shadow:none;border-radius:0;
  color:var(--blue);font-size:1.02rem;
}
body .elementor .btnw-link .elementor-button::before{content:none}
body .elementor .btnw-link .elementor-button .elementor-button-text::after{
  content:"";width:1.4em;height:2px;background:var(--spark-lo);-webkit-mask:none;mask:none;transition:width .25s var(--ease);
}
body .elementor .btnw-link .elementor-button:hover{background:transparent;color:var(--blue-hi);transform:none;box-shadow:none}
body .elementor .btnw-link .elementor-button:hover .elementor-button-text::after{width:2.2em}
body .elementor :is(.sec-blue,.hero) .btnw-link .elementor-button{color:var(--spark)}
body .elementor :is(.sec-blue,.hero) .btnw-link .elementor-button:hover{color:var(--white)}
body .elementor .btnw-sm .elementor-button{min-height:46px;padding:.6rem 1.1rem;font-size:1.02rem}

/* Side-by-side buttons: widgets meant to share a row. */
body .elementor .elementor-widget.btnw{width:auto;max-width:100%;margin:0 .7rem .7rem 0}
body .elementor .elementor-widget.btnw:last-child{margin-right:0}
body .elementor .center.btnw{margin-inline:auto}
@media (max-width:600px){
  body .elementor .elementor-widget.btnw:not(.btnw-link){width:100%;margin-right:0}
  body .elementor .elementor-widget.btnw:not(.btnw-link) .elementor-button{width:100%}
}

/* ------------------------------------------------------------------- lists */

/* `ticks`: a list with lit check marks. The kit colours the <i> directly, so
   the mark is drawn on the icon box itself and the glyph is hidden. */
body .elementor .ticks .elementor-icon-list-items{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
body .elementor .ticks .elementor-icon-list-item{display:flex;align-items:flex-start;gap:.8rem;font-size:var(--fs-body);line-height:1.45}
body .elementor .ticks .elementor-icon-list-icon{
  flex:none;width:24px;height:24px;margin-top:.02em;border-radius:7px;background:var(--blue);position:relative;
}
body .elementor .ticks .elementor-icon-list-icon::after{
  content:"";position:absolute;inset:5px;background:var(--spark);
  -webkit-mask:url("../img/ic/check.svg") center / contain no-repeat;mask:url("../img/ic/check.svg") center / contain no-repeat;
}
body .elementor .ticks .elementor-icon-list-icon i,
body .elementor .ticks .elementor-icon-list-icon svg{display:none}
body .elementor .ticks .elementor-icon-list-text{color:var(--text);font-family:var(--font-text);font-weight:500}
body .elementor .ticks-light .elementor-icon-list-icon{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
body .elementor .sec-blue .ticks .elementor-icon-list-text{color:var(--white)}
body .elementor .elementor-widget.ticks{margin-bottom:2rem}

/* `chips`: the same widget as a row of labels */
body .elementor .chips .elementor-icon-list-items{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
body .elementor .chips .elementor-icon-list-item{
  display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .95rem;border-radius:var(--pill);
  border:1px solid var(--line-strong);background:var(--paper);
  font-family:var(--font-display);font-size:1.05rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);
}
body .elementor .chips .elementor-icon-list-icon{width:8px;height:8px;flex:none;border-radius:50%;background:var(--ok);box-shadow:0 0 8px rgba(59,227,122,.8)}
body .elementor .chips .elementor-icon-list-icon i,
body .elementor .chips .elementor-icon-list-icon svg{display:none}
body .elementor .chips .elementor-icon-list-text{color:inherit}

/* ------------------------------------------------------------------ images */

body .elementor .elementor-widget-image img{display:block;max-width:100%;height:auto}

/* frame: a photograph with the panel's corner brackets, cyan-lit.
   Prefixed `body .elementor` because Elementor's frontend resets
   `.elementor img{border-radius:0;box-shadow:none}` at equal weight. */
body .elementor .frame{position:relative;isolation:isolate}
body .elementor .frame img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:var(--r);box-shadow:var(--shadow-2)}
body .elementor .frame img{border-radius:var(--r-lg)}
body .elementor .frame::before{content:"";position:absolute;z-index:-1;inset:auto -14px -14px auto;width:58%;height:62%;border-radius:var(--r-lg);
  background:var(--sky);pointer-events:none}
body .elementor .frame::after{content:"";position:absolute;z-index:1;left:18px;top:18px;width:46px;height:6px;border-radius:6px;background:var(--spark);
  box-shadow:0 2px 8px rgba(0,0,0,.18);pointer-events:none}
body .elementor .frame-wide img{aspect-ratio:16 / 10}
body .elementor .frame-on-blue::before{background:rgba(255,255,255,.16)}
@media (max-width:767px){
  body .elementor .frame::before{inset:auto -8px -8px auto}
}

/* ------------------------------------------------------------------- FAQ */

/* Elementor's Toggle widget. Elementor's own script shows a panel by setting
   display:block on it; the theme's fallback pages open them through
   .is-open (main.js). Panels are hidden only under html.js — fail open. */
body .elementor .faq .elementor-toggle{display:grid;gap:.7rem}
body .elementor .faq .elementor-toggle-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1);overflow:hidden;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
body .elementor .faq .elementor-toggle-item:hover{border-color:var(--line-strong)}
body .elementor .faq .elementor-toggle-item:has(.elementor-active),body .elementor .faq .elementor-toggle-item.is-open{border-color:rgba(3,82,123,.45);box-shadow:var(--shadow-1),inset 4px 0 0 var(--spark)}
body .elementor .faq .elementor-tab-title{
  display:flex;align-items:center;gap:1rem;padding:1.15rem 1.3rem;cursor:pointer;border:0;
  font-family:var(--font-display);font-size:1.35rem;font-weight:700;line-height:1.15;color:var(--text);
}
body .elementor .faq .elementor-tab-title a,body .elementor .faq .elementor-toggle-title{color:inherit;text-decoration:none;flex:1;order:1}
body .elementor .faq .elementor-toggle-icon{
  order:2;flex:none;width:36px;height:36px;border-radius:50%;background:var(--sky);position:relative;
  display:inline-grid;place-items:center;transition:background-color .2s var(--ease),transform .3s var(--ease);
}
body .elementor .faq .elementor-toggle-icon i,body .elementor .faq .elementor-toggle-icon svg{display:none}
body .elementor .faq .elementor-toggle-icon::before,body .elementor .faq .elementor-toggle-icon::after{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--blue);transition:transform .3s var(--ease);
}
body .elementor .faq .elementor-toggle-icon::after{transform:rotate(90deg)}
body .elementor .faq .elementor-tab-title.elementor-active .elementor-toggle-icon,
body .elementor .faq .is-open .elementor-toggle-icon{background:var(--spark)}
body .elementor .faq .elementor-tab-title.elementor-active .elementor-toggle-icon::after,
body .elementor .faq .is-open .elementor-toggle-icon::after{transform:rotate(0)}
body .elementor .faq .elementor-tab-content{padding:0 1.3rem 1.25rem;border:0;color:var(--text-2);font-size:1.02rem;line-height:1.7}
body .elementor .faq .elementor-tab-content p{margin:0;max-width:62ch}
html.js body:not(.elementor-editor-active) .mel-page .faq .elementor-toggle-item:not(.is-open) .elementor-tab-content{display:none}

/* --------------------------------------------------------- shortcode slots */

body .elementor .elementor-widget-shortcode{width:100%}
body .elementor .plugmatrix-form-embed{width:100%}