.elementor-kit-17{--e-global-color-primary:#3A5599;--e-global-color-secondary:#7890CC;--e-global-color-text:#1D1E22;--e-global-color-accent:#E8701A;--e-global-color-a3784ba:#E8701A;--e-global-color-4243289:#1D1E22;--e-global-color-c0silver:#C2CBE7;--e-global-color-c0white:#F5F6F8;--e-global-color-c0mut:#5F6066;--e-global-typography-primary-font-family:"Figtree";--e-global-typography-primary-font-size:16px;--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Figtree";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-17 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.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 *//* ================= Mohawk Valley Roofing, site custom CSS =================
   Added 2026-08-21 (Deb: "can you make the form a little bit better").
   The lead form appears on ~101 pages. Styling it here in the KIT rather than on each widget means
   one change instead of 101, and one place to revert. Palette is the Brand Foundation Kit.
   Signal Orange keeps DECK BLACK text, never white: white on Signal Orange measures 3.1:1 and
   fails, Deck Black measures 5.36:1 and passes AA. The guide's own contrast note says the same.
   ========================================================================= */
.elementor-widget-form .elementor-field-group{margin-bottom:20px}
.elementor-widget-form .elementor-field-label{
  font-size:11.5px !important;font-weight:800 !important;letter-spacing:1.4px;
  text-transform:uppercase;color:#5F6066 !important;margin-bottom:9px !important}
.elementor-widget-form .elementor-field-required > .elementor-field-label::after{
  content:"*";color:#E8701A;margin-left:4px;font-weight:800}
.elementor-widget-form .elementor-field-textual{
  min-height:54px;padding:14px 16px !important;font-size:16px !important;line-height:1.4;
  background:#FBFCFD !important;border:1px solid #D9DEEC !important;border-radius:2px !important;
  color:#1D1E22 !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:#9AA0AD;opacity:1}
.elementor-widget-form .elementor-field-textual:hover{border-color:#B9C1D8 !important}
.elementor-widget-form .elementor-field-textual:focus{
  outline:none;background:#fff !important;border-color:#3A5599 !important;
  box-shadow:0 0 0 3px rgba(58,85,153,.16) !important}
/* the native select arrow is invisible against this field background, so draw one */
.elementor-widget-form select.elementor-field-textual{
  -webkit-appearance:none;appearance:none;padding-right:44px !important}
/* 🔴 Do NOT draw our own arrow. Elementor Pro renders its own caret in a .select-caret-down-wrapper
   div beside the select, so a background-image arrow produces TWO: a thin custom chevron next to
   Pro's solid triangle. Style Pro's instead. Caught on Kogan 2026-08-21, same CSS, same bug. */
.elementor-widget-form .select-caret-down-wrapper svg{width:11px;height:11px;fill:#5F6066}
.elementor-widget-form .elementor-button[type=submit]{
  width:100%;min-height:58px;border-radius:2px;
  background-color:#E8701A !important;color:#1D1E22 !important;
  font-weight:800 !important;font-size:15px !important;letter-spacing:1.1px;
  text-transform:uppercase;border:0;
  box-shadow:0 10px 22px rgba(232,112,26,.26);
  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(232,112,26,.32)}
.elementor-widget-form .elementor-button[type=submit]:focus-visible{
  outline:3px solid #3A5599;outline-offset:3px}
.elementor-widget-form .elementor-message{font-size:14.5px;margin-top:10px}
.elementor-widget-form .elementor-message.elementor-message-danger{color:#C0392B}
@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}}
@media(max-width:767px){
  .elementor-widget-form .elementor-field-textual{min-height:52px;font-size:16px !important}
  .elementor-widget-form .elementor-button[type=submit]{min-height:56px}}

/* ================= Homepage: hero + Why Choose Us ===========================
   Added 2026-08-22. Deb approved TWO sections out of the sharpening draft and
   asked for those only, so this is deliberately narrow. Everything is scoped to
   .elementor-18 (the homepage document) and, inside it, to those two sections.
   Nothing here touches the header, the marquee, the services grid, the process
   steps, the testimonials or any other page.
   Backups: web/sharpen-backups/*_pre_sharpen_2026-08-22.json
   ========================================================================== */

/* ---------- HERO ---------------------------------------------------------- */
/* Directional scrim so the copy is readable and the roof photo still reads on
   the right. NOTE: this container already ships its own ::before overlay at
   opacity .62. Retune that one. Stacking a second overlay is what turned the
   whole hero black on the first attempt. */
.elementor-18 .elementor-element-b1c89d36{position:relative}
.elementor-18 .elementor-element-b1c89d36::before{
  opacity:1 !important;
  background:linear-gradient(97deg,
    rgba(18,19,23,.88) 0%, rgba(18,19,23,.80) 30%, rgba(18,19,23,.46) 52%,
    rgba(18,19,23,.14) 66%, rgba(18,19,23,0) 82%) !important}
.elementor-18 .elementor-element-b1c89d36 > .e-con-inner{position:relative;z-index:1}

.elementor-18 .elementor-element-791e031d .elementor-heading-title{
  color:#E8701A !important;font-size:13px !important;letter-spacing:.16em}
.elementor-18 .elementor-element-c72446e1 .elementor-heading-title{
  max-width:20ch;line-height:1.08 !important;letter-spacing:-.6px}
.elementor-18 .elementor-element-3e424c4b{line-height:1.62}

/* trust card: was transparent glass sitting on a bright roof photo */
.elementor-18 .elementor-element-775de8e4{
  background-image:none !important;background-color:rgba(20,21,25,.90) !important;
  backdrop-filter:blur(3px);border:1px solid rgba(194,203,231,.22) !important;
  border-radius:8px !important;box-shadow:0 26px 60px rgba(0,0,0,.45)}
.elementor-18 .mvr-cardcta{margin-top:4px}
.elementor-18 .mvr-cardcta a{display:block;color:#fff !important;font-weight:700;
  font-size:20px;text-decoration:none;transition:color .16s ease}
.elementor-18 .mvr-cardcta a:hover{color:#E8701A !important}
.elementor-18 .mvr-cardcta span{display:block;color:#C2CBE7;font-size:12.5px;
  margin-top:6px;line-height:1.5}

/* ---------- WHY CHOOSE US (section 4b5b21bd) ------------------------------ */
/* eyebrow gets a rule so the section opens deliberately */
.elementor-18 .elementor-element-99f15438 .elementor-heading-title{
  display:flex;align-items:center;gap:12px}
.elementor-18 .elementor-element-99f15438 .elementor-heading-title::before{
  content:"";width:26px;height:2px;flex:0 0 26px;background:#E8701A;border-radius:2px}

/* six-item checklist ran far past the photo. Two columns balances it. */
.elementor-18 .elementor-element-6e44af1a .elementor-icon-list-items{
  display:grid !important;grid-template-columns:repeat(2,1fr);gap:12px 26px}

/* the photo picks up the same corner and shadow as the cards below it */
.elementor-18 .elementor-element-4f0a139c img{
  border-radius:10px;box-shadow:0 10px 30px rgba(29,30,34,.10)}

/* the four cards get real edges and a hover state */
.elementor-18 .elementor-element-04d3b0af,
.elementor-18 .elementor-element-e4305112,
.elementor-18 .elementor-element-ff212362,
.elementor-18 .elementor-element-f97adfef{
  background-color:#fff !important;border:1px solid #E4E7F0 !important;
  border-radius:10px !important;overflow:hidden;position:relative;
  box-shadow:0 1px 2px rgba(29,30,34,.04), 0 8px 24px rgba(29,30,34,.05) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.elementor-18 .elementor-element-04d3b0af::before,
.elementor-18 .elementor-element-e4305112::before,
.elementor-18 .elementor-element-ff212362::before,
.elementor-18 .elementor-element-f97adfef::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;background:#E8701A;
  transform:scaleX(0);transform-origin:left;transition:transform .22s ease;z-index:2}
.elementor-18 .elementor-element-04d3b0af:hover,
.elementor-18 .elementor-element-e4305112:hover,
.elementor-18 .elementor-element-ff212362:hover,
.elementor-18 .elementor-element-f97adfef:hover{
  transform:translateY(-4px);border-color:#D3D9E8 !important;
  box-shadow:0 2px 4px rgba(29,30,34,.05), 0 18px 40px rgba(29,30,34,.11) !important}
.elementor-18 .elementor-element-04d3b0af:hover::before,
.elementor-18 .elementor-element-e4305112:hover::before,
.elementor-18 .elementor-element-ff212362:hover::before,
.elementor-18 .elementor-element-f97adfef:hover::before{transform:scaleX(1)}

/* ---------- mobile -------------------------------------------------------- */
@media(max-width:767px){
  .elementor-18 .elementor-element-b1c89d36::before{
    background:linear-gradient(180deg, rgba(18,19,23,.62) 0%, rgba(18,19,23,.78) 55%,
      rgba(18,19,23,.88) 100%) !important}
  .elementor-18 .elementor-element-791e031d .elementor-heading-title{
    font-size:11px !important;letter-spacing:.12em}
  .elementor-18 .elementor-element-c72446e1 .elementor-heading-title{max-width:none}
  .elementor-18 .elementor-element-d4a75afd .elementor-button,
  .elementor-18 .elementor-element-5c1bde26 .elementor-button{width:100%;text-align:center}
  .elementor-18 .elementor-element-6e44af1a .elementor-icon-list-items{grid-template-columns:1fr}
}

/* ================= Tear-off vs restoration: Option B ========================
   Added 2026-08-22. Deb picked Option B out of the reimagine draft and asked
   for that one only. Scoped to the homepage document and to this section.
   The panels are still real Elementor containers, so the bullets stay editable.
   Backup: web/sharpen-backups/page18_pre_optionB_2026-08-22.json
   ========================================================================== */

/* the winning panel: elevation, and the tag that sits on its top edge */
.elementor-18 .elementor-element-84377bb4{
  position:relative;overflow:visible !important;
  box-shadow:0 18px 46px rgba(29,30,34,.22)}
/* the tag is a real element, NOT a pseudo: Elementor already owns .e-con::before
   for its background overlay and its inset:0 wins, which paints the whole panel */
/* the tag's own widget wrapper is position:relative by default, which would
   anchor the tag inside the panel padding. Make it static so the tag
   resolves against the panel and straddles its top edge. */
.elementor-18 .elementor-element-032ef9c{position:static !important}
.elementor-18 .mvr-cmp-tag{
  position:absolute;top:-11px;left:34px;
  background:#E8701A;color:#1D1E22;border-radius:3px;padding:7px 12px;
  font:700 11px/1 Figtree,sans-serif;letter-spacing:.12em;text-transform:uppercase}

/* the ratio is set here, not in the Elementor width control: on this build the
   container width setting does not reach --width, so both panels stayed equal */
.elementor-18 .elementor-element-7de1eaa8{flex:0 0 calc(41% - 12px) !important;max-width:calc(41% - 12px)}
.elementor-18 .elementor-element-84377bb4{flex:0 0 calc(57% - 12px) !important;max-width:calc(57% - 12px)}

/* restoration bullets: hairline separated rows so each claim stands alone */
.elementor-18 .elementor-element-81d7efa0 .elementor-icon-list-item{
  padding:11px 0 !important;border-top:1px solid rgba(194,203,231,.14)}
.elementor-18 .elementor-element-81d7efa0 .elementor-icon-list-item:first-child{border-top:0}
.elementor-18 .elementor-element-81d7efa0 .elementor-icon-list-text{
  font-size:15.5px !important;line-height:1.5 !important}

/* tear-off bullets: quieter, and no hairlines. It is the option being dismissed */
.elementor-18 .elementor-element-00fc4ad9 .elementor-icon-list-item{padding:8px 0 !important}
.elementor-18 .elementor-element-00fc4ad9 .elementor-icon-list-text{
  font-size:14.5px !important;line-height:1.5 !important}


/* the two panels finish on the same line again. Aligning the row to the top made
   the short tear-off panel strand a 150px hole under it. The hierarchy comes from
   the colour and the CTA, not from the height. */
.elementor-18 .elementor-element-7de1eaa8 > .e-con-inner{justify-content:center}
/* ^ .e-con-inner again, not the .e-con. Same trap as the panel widths. */

/* CTA row inside the winning panel */
.elementor-18 .mvr-cmp-cta{
  margin-top:24px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.elementor-18 .mvr-cmp-cta a.btn{
  display:inline-block;background:#E8701A;color:#1D1E22 !important;
  font:600 14px/1 Oswald,sans-serif;letter-spacing:.05em;text-transform:uppercase;
  padding:15px 26px;border-radius:4px;text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease}
.elementor-18 .mvr-cmp-cta a.btn:hover{
  transform:translateY(-2px);box-shadow:0 14px 30px rgba(232,112,26,.34)}
.elementor-18 .mvr-cmp-cta a.tel{
  color:#C2CBE7 !important;font:500 14.5px/1 Figtree,sans-serif;text-decoration:none}
.elementor-18 .mvr-cmp-cta a.tel:hover{color:#E8701A !important}

@media(max-width:1024px){
  /* NOTE: the flex container is .e-con-inner, not the .e-con itself. Targeting the
     outer element does nothing, which is why the two panels stayed side by side and
     squeezed to 133px and 190px on a phone. The flex-basis rules above are !important,
     so the stacking rules have to be !important too or they lose. */
  .elementor-18 .elementor-element-3fd49fe1 > .e-con-inner,
  .elementor-18 .elementor-element-3fd49fe1{flex-direction:column !important}
  .elementor-18 .elementor-element-7de1eaa8,
  .elementor-18 .elementor-element-84377bb4{
    flex:1 1 100% !important;max-width:100% !important;width:100% !important}
  /* the winning panel goes first on a phone, the dismissed one follows */
  .elementor-18 .elementor-element-84377bb4{order:-1;margin-top:14px}
  .elementor-18 .mvr-cmp-cta a.btn{width:100%;text-align:center}
}

/* --- colour pass on this section only, 2026-08-22 (Deb: "make that section a bit
   colourful, dont touch any other part of the design"). Mohawk Blue #7890CC is the
   guide's PRIMARY colour and was almost absent from the site, so it does the work
   here. Nothing outside .elementor-element-e4b9ff3e is touched. --- */
.elementor-18 .elementor-element-84377bb4{
  background-image:
    linear-gradient(90deg,#E8701A 0%,#7890CC 100%),
    radial-gradient(120% 90% at 100% 0%, rgba(120,144,204,.20) 0%, rgba(120,144,204,0) 62%);
  background-size:100% 3px, 100% 100%;
  background-position:0 0, 0 0;
  background-repeat:no-repeat,no-repeat}
.elementor-18 .elementor-element-81d7efa0 .elementor-icon-list-item{
  border-top-color:rgba(120,144,204,.30) !important}

/* ================= Service page hero, Option B ==============================
   Added 2026-08-22 (Deb picked Option B for all service pages).
   Scoped by the classes the script puts on the hero, so ONE block covers every
   service page regardless of its element ids. Those ids differ per page, the
   heroes are not a shared template.
   🔑 Signal Orange cannot be used for TEXT over these roof photos: measured 1.06:1
   before, 2.5:1 even under a scrim. Orange text uses lighter tints of it. The
   buttons keep true #E8701A because that is dark text on an orange fill (5.36:1).
   ========================================================================== */
.mvr-svc-hero > .e-con-inner{align-items:center;gap:52px}
.mvr-svc-hero .mvr-svc-heroleft{flex:1 1 auto;min-width:0}
.mvr-svc-hero .mvr-svc-heroform{flex:0 0 384px;max-width:384px}

/* --- the inspection card --- */
.mvr-svc-heroform{background:#fff;border-radius:10px;padding:26px;
  box-shadow:0 26px 60px rgba(0,0,0,.40)}
.mvr-svc-heroform .tag{display:inline-block;background:#E8701A;color:#1D1E22;
  font:700 10.5px/1 Figtree,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  padding:6px 10px;border-radius:3px;margin-bottom:12px}
.mvr-svc-heroform h4{font:600 21px/1.22 Oswald,sans-serif;color:#1D1E22;margin:0 0 8px}
.mvr-svc-heroform p{font:400 13.5px/1.55 Figtree,sans-serif;color:#5F6066;margin:0 0 4px}
.mvr-svc-heroform p.fine{font-size:12px;text-align:center;margin:12px 0 0}
.mvr-svc-heroform .elementor-field-group{margin-bottom:12px}
.mvr-svc-heroform .elementor-button{box-shadow:none}

/* --- left column --- */
.mvr-svc-heroleft h1{line-height:1.08 !important;letter-spacing:-.5px;max-width:16ch}
.mvr-svc-heroleft .elementor-widget-text-editor{line-height:1.62}

@media(max-width:1024px){
  .mvr-svc-hero > .e-con-inner{flex-direction:column !important;align-items:stretch;gap:28px}
  .mvr-svc-hero .mvr-svc-heroform{flex:1 1 100%;max-width:100%}
  .mvr-svc-heroleft h1{max-width:none}
}
@media(max-width:767px){
  .mvr-svc-heroleft h1{font-size:31px !important}
}/* End custom CSS */