.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============ Kogan LLC, site custom CSS ============
   Added 2026-08-21 with the contact form. Styled in the KIT rather than on the widget so every
   form added later inherits it and there is one place to revert.
   Amber keeps NAVY_DEEP text, which is the button pattern already used across this build.
   ==================================================== */
.elementor-widget-form .elementor-field-group{margin-bottom:20px}
.elementor-widget-form .elementor-field-label{
  font-family:Inter,sans-serif;font-size:11.5px !important;font-weight:800 !important;
  letter-spacing:1.5px;text-transform:uppercase;color:#3F5A68 !important;margin-bottom:9px !important}
.elementor-widget-form .elementor-field-required > .elementor-field-label::after{
  content:"*";color:#8FD3F0;margin-left:4px;font-weight:900}
.elementor-widget-form .elementor-field-textual{
  min-height:54px;padding:14px 16px !important;font-family:Inter,sans-serif;
  font-size:16px !important;line-height:1.4;background:#FBFCFD !important;
  border:1px solid #DDE2E8 !important;border-radius:2px !important;color:#0B2E40 !important;
  box-shadow:none !important;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.elementor-widget-form textarea.elementor-field-textual{min-height:150px}
.elementor-widget-form .elementor-field-textual::placeholder{color:#93A0AD;opacity:1}
.elementor-widget-form .elementor-field-textual:hover{border-color:#BDC7D2 !important}
.elementor-widget-form .elementor-field-textual:focus{
  outline:none;background:#fff !important;border-color:#1C77A3 !important;
  box-shadow:0 0 0 3px rgba(28,119,163,.16) !important}
.elementor-widget-form select.elementor-field-textual{
  -webkit-appearance:none;appearance:none;padding-right:44px !important}
/* 🔴 Do NOT draw our own arrow here. Elementor Pro already renders its own caret in a
   .select-caret-down-wrapper div next to the select, so a background-image arrow gives you TWO:
   a thin custom chevron and Pro's solid triangle sitting beside each other. Style Pro's instead. */
.elementor-widget-form .select-caret-down-wrapper{opacity:1}
.elementor-widget-form .select-caret-down-wrapper svg{width:11px;height:11px;fill:#3F5A68}
.elementor-widget-form .elementor-button[type=submit]{
  width:100%;min-height:58px;border-radius:2px;border:0;
  background-color:#8FD3F0 !important;color:#0B2E40 !important;
  font-family:Archivo,sans-serif;font-weight:800 !important;font-size:15px !important;
  letter-spacing:1.1px;text-transform:uppercase;
  box-shadow:0 10px 22px rgba(143,211,240,.28);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.elementor-widget-form .elementor-button[type=submit]:hover{
  transform:translateY(-2px);filter:brightness(1.04);
  box-shadow:0 16px 30px rgba(143,211,240,.34)}
.elementor-widget-form .elementor-button[type=submit]:focus-visible{
  outline:3px solid #1C77A3;outline-offset:3px}
.elementor-widget-form .elementor-message{font-family:Inter,sans-serif;font-size:14.5px;margin-top:10px}
@media(prefers-reduced-motion:reduce){
  .elementor-widget-form .elementor-button[type=submit],
  .elementor-widget-form .elementor-field-textual{transition:none !important}
  .elementor-widget-form .elementor-button[type=submit]:hover{transform:none}}


/* ============ MOBILE OFFSET FRAME FIX (2026-08-23) ============
   Reported by Bryce from a phone: the amber offset frame detached from the photo and hung off
   the left edge of the screen.
   Cause: the frame is drawn at left:-20px; bottom:-20px on a wrapper that has a page gutter on
   desktop but sits flush to the viewport edge on mobile, so the -20px overhang went off-screen
   and got clipped. There was NO max-width media query for this treatment anywhere on the site,
   on any of the 8 element IDs that use it, so every service page showed it.
   Fix: drop the HORIZONTAL overhang to zero below 768px and keep the vertical peek, which is the
   part that actually carries the accent. Frame shrinks slightly so it still reads as a frame.
   =============================================================== */
@media (max-width:767px) {
  .elementor-element-kg4000a::before,
  .elementor-element-kg0000d::before,
  .elementor-element-kg00008::before,
  .elementor-element-kg4000c::before,
  .elementor-element-kg0000c::before,
  .elementor-element-kg0001b::before,
  .elementor-element-kg40014::before,
  .elementor-element-kg00014::before {
    left:0 !important;
    right:auto !important;
    bottom:-10px !important;
    width:52% !important;
    height:52% !important;
    border-width:2px !important;
  }
}


/* ============ HERO OVERLAY GUARD (2026-09-28) ============
   The mobile offset-frame fix above targets element ids (kg00008, kg40014 ...) that the service
   pages ALSO use for their hero section, so on phones it shrank the hero's dark overlay to 52%
   and left the headline on the bare photo (17 pages). Element ids repeat across pages in this
   build. When one of those ids is the FIRST section of the page it is a hero, so give the
   overlay back its full size there. Frames are never the first section.
   =============================================================== */
@media (max-width:767px) {
  [data-elementor-type="wp-page"] > .elementor-element-kg00008:first-child::before,
  [data-elementor-type="wp-page"] > .elementor-element-kg40014:first-child::before,
  [data-elementor-type="wp-page"] > .elementor-element-kg4000a:first-child::before,
  [data-elementor-type="wp-page"] > .elementor-element-kg0000d:first-child::before,
  [data-elementor-type="wp-page"] > .elementor-element-kg4000c:first-child::before,
  [data-elementor-type="wp-page"] > .elementor-element-kg0000c:first-child::before,
  [data-elementor-type="wp-page"] > .elementor-element-kg0001b:first-child::before,
  [data-elementor-type="wp-page"] > .elementor-element-kg00014:first-child::before {
    top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
    width:100% !important; height:100% !important; border-width:0 !important;
  }
}
/* KOGAN HOVER FIX 2026-10-13: white-on-dark phone links fell back to the theme's a:hover #336 (dark blue on navy). */
@media (min-width:1025px){.elementor-kit-6 a.kg-hd__tel:hover,.elementor-kit-6 a.kg-hd__tel:focus,.elementor-kit-6 a.kg-hd__tel:focus-visible,.elementor-kit-6 a.kg-hd__tel:active{color:#8FD3F0;background:transparent}.elementor-kit-6 a.kg-hd__tel{transition:color .2s ease}}
.elementor-kit-6 a.kgr__b--s:hover,.elementor-kit-6 a.kgr__b--s:focus,.elementor-kit-6 a.kgr__b--s:focus-visible,.elementor-kit-6 a.kgr__b--s:active{color:#8FD3F0}

/* KOGAN CONTRAST FIX 2026-10-13 (Niel): mobile/tablet header phone pill hover was old amber #FFB525; mega menu button was white on #8FD3F0. */
@media (max-width:1024px){.elementor-kit-6 a.kg-hd__tel:hover,.elementor-kit-6 a.kg-hd__tel:focus,.elementor-kit-6 a.kg-hd__tel:focus-visible,.elementor-kit-6 a.kg-hd__tel:active{background:#B7E4F6;color:#0B1424}}
.elementor-kit-6 .kg-mega__btn,.elementor-kit-6 .kg-mega__btn:hover,.elementor-kit-6 .kg-mega__btn:focus,.elementor-kit-6 .kg-mega__btn:focus-visible,.elementor-kit-6 .kg-mega__btn:active{color:#0B2E40}/* End custom CSS */