/* ==========================================================================
   Lyndale's Repair Services LLC - shared stylesheet

   The pages copy the original Wix site's desktop layout. Each block is placed
   absolutely inside its section at the spot it holds on the original at 1280px
   wide. The positions live in each page's <style> block (header and footer in
   assets/chrome.css). Positions are measured from the page centre, so the
   980px content column stays centred at any window width, just as on Wix.

   This file holds the site's theme: fonts, text styles, colours, buttons,
   the nav, forms, sliders and the small-screen layout.
   ========================================================================== */

/* -------- fonts (the original's own files) -------- */
@font-face { font-family: wf_cfe0ac7760774f58bca455055; font-display: swap; src: url("fonts/roboto-slab.woff2") format("woff2"); }
@font-face { font-family: wf_d2b74fa2704044fa98373433c; font-display: swap; src: url("fonts/poppins-regular.woff2") format("woff2"); }
@font-face { font-family: wf_fbe2048d9f994d8c8d5073ed8; font-display: swap; src: url("fonts/poppins-medium.woff2") format("woff2"); }
@font-face { font-family: helvetica-w01-roman; font-weight: 400; font-display: swap; src: url("fonts/helvetica-w01-roman.woff2") format("woff2"); }

:root {
  --ff-slab: wfont_e34b9f_cfe0ac7760774f58bca455055b30a39f, wf_cfe0ac7760774f58bca455055, "Roboto Slab", serif;
  --ff-poppins: wfont_3f090f_d2b74fa2704044fa98373433c883f8ed, wf_d2b74fa2704044fa98373433c, "Poppins", sans-serif;
  --ff-poppins-med: wfont_3f090f_fbe2048d9f994d8c8d5073ed8164a33e, wf_fbe2048d9f994d8c8d5073ed8, "Poppins", sans-serif;
  --ff-helvetica: helvetica-w01-roman, Helvetica, Arial, sans-serif;
  --ff-din: din-next-w01-light, sans-serif;

  /* theme text styles, as defined on the original */
  --font_0: normal normal bold 60px/1.4em var(--ff-slab);
  --font_2: normal normal bold 50px/1.4em var(--ff-slab);
  --font_3: normal normal bold 40px/1.4em var(--ff-slab);
  --font_4: normal normal bold 30px/1.4em var(--ff-slab);
  --font_5: normal normal bold 25px/1.4em var(--ff-slab);
  --font_6: normal normal bold 20px/1.4em var(--ff-slab);
  --font_7: normal normal normal 18px/1.4em var(--ff-poppins);
  --font_8: normal normal normal 16px/1.4em var(--ff-poppins);
  --font_9: normal normal normal 14px/1.4em var(--ff-poppins);

  --red: #d83b40;
  --blue: #1e4880;
  --grey: #595959;
}

/* -------- base -------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #000; font: 14px/1.4 var(--ff-poppins); }
img { display: block; }
a { color: inherit; text-decoration: none; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 10px 16px; background: var(--blue); color: #fff; }
.skip-link:focus { left: 0; }

/* -------- section + block placement -------- */
.sec { position: relative; width: 100%; }
.sec > .bg-fill, .bg-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-img { object-fit: cover; }
picture { display: contents; }
.c { position: absolute; margin: 0; }
.img img, .gitem img { width: 100%; height: 100%; object-fit: cover; }
.box > img.fill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vec svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-bg { overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.strip { position: absolute; inset: 0; display: flex; }
.strip > .col { position: relative; flex: 1 1 0; height: 100%; }
.col-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* -------- rich text (Wix text boxes) -------- */
.rt { overflow-wrap: break-word; }
:where(.rt) :is(p, h1, h2, h3, h4, h5, h6, ul, ol, li) { margin: 0; padding: 0; font: inherit; }
.rt a { color: inherit; }
.rt ul { list-style: disc; margin-inline: .5em 0; padding-inline: 1.3em 0; letter-spacing: normal; line-height: normal; }
.rt ol { list-style: decimal; margin-inline: .5em 0; padding-inline: 1.3em 0; line-height: normal; }
.rt li { font-style: inherit; font-weight: inherit; line-height: inherit; letter-spacing: normal; }
.font_0 { font: var(--font_0); color: #000; letter-spacing: 0em; }
.font_2 { font: var(--font_2); color: #000; letter-spacing: 0em; }
.font_3 { font: var(--font_3); color: #000; letter-spacing: 0em; }
.font_4 { font: var(--font_4); color: #000; letter-spacing: 0em; }
.font_5 { font: var(--font_5); color: #000; letter-spacing: 0em; }
.font_6 { font: var(--font_6); color: #000; letter-spacing: 0em; }
.font_7 { font: var(--font_7); color: #000; letter-spacing: 0em; }
.font_8 { font: var(--font_8); color: #000; letter-spacing: 0em; }
.font_9 { font: var(--font_9); color: var(--grey); letter-spacing: 0em; }
.color_36 { color: #fff; }
.color_39 { color: #c7c7c7; }
.color_40 { color: var(--grey); }

/* -------- buttons -------- */
.btn { display: flex; align-items: center; justify-content: center; text-align: center; white-space: nowrap; transition: background-color .2s, color .2s; }
.btn:hover, .btn:focus-visible { background: var(--red) !important; color: #fff !important; border-color: var(--red) !important; }

/* -------- header + nav -------- */
#SITE_HEADER { height: 94px; background: #fff; z-index: 50; }
#site-nav { z-index: 60; }
#nav { display: flex; height: 100%; list-style: none; margin: 0; padding: 0; }
#nav > li { position: relative; display: flex; padding: 4px; }
#nav > li > a {
  flex: 1; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--red); color: var(--red); background: transparent;
  font: 16px/1.4 var(--ff-poppins); letter-spacing: .05em; white-space: nowrap;
  transition: background-color .2s, color .2s;
}
#nav > li > a:hover, #nav > li > a:focus-visible, #nav > li.has-sub:hover > a { background: var(--blue); border-color: var(--blue); color: #fff; }
#nav > li > a[aria-current] { background: var(--blue); border-color: #000; color: #fff; }
/* Services flyout (desktop) */
#nav .sub {
  position: absolute; top: calc(100% - 4px); left: 50%; width: 191px; margin-left: -95.5px;
  list-style: none; margin-top: 0; padding: 10px; display: none;
}
#nav li.has-sub:hover .sub, #nav li.has-sub:focus-within .sub { display: block; }
#nav .sub li { margin-bottom: 8px; }
#nav .sub a {
  display: block; padding: 5px 1px; background: #fff; border: 1px solid #000; text-align: center;
  font: 14px/1.5 var(--ff-poppins); letter-spacing: .05em; color: var(--red); white-space: nowrap;
}
#nav .sub a:hover, #nav .sub a:focus-visible, #nav .sub a[aria-current] { background: var(--blue); color: #fff; }
.sub-toggle { display: none; }
.nav-toggle { display: none; }

/* -------- forms (Wix Forms look) -------- */
.wixform .form-title { position: absolute; margin: 0; }
.wixform label, .wixform .fbox, .wixform .form-submit { position: absolute; }
.wixform label { font: 14px/1.4 var(--ff-poppins); color: #000; white-space: nowrap; }
.wixform .fbox { background: #fff; border-bottom: 2px solid #000; }
.wixform input, .wixform textarea {
  width: 100%; height: 100%; border: 0; background: transparent; outline: 0;
  font: 16px var(--ff-helvetica); color: #000; padding: 8px 2px 8px 0; resize: none;
}
.wixform textarea { padding: 8px 12px 8px 0; }
.wixform .fbox:focus-within { border-bottom-color: var(--blue); }
.wixform .form-submit { display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color .2s; }
.wixform .form-submit:hover { background: var(--red) !important; border-color: var(--red) !important; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------- featured projects slider (Wix slider gallery) -------- */
.slider-gallery { overflow: hidden; }
.sg-track { display: flex; gap: var(--gap); height: 100%; width: max-content; will-change: transform; }
.sg-item { flex: none; height: 100%; aspect-ratio: 1; }
.sg-item img { width: 100%; height: 100%; object-fit: cover; }

/* -------- client reviews slideshow -------- */
.review-slider { overflow: hidden; }
.rv-slide { position: absolute; inset: 0; transform: translateX(100%); visibility: hidden; }
.rv-slide.is-active { transform: none; visibility: visible; }
.rv-slide .c { position: absolute; }

/* -------- lightbox -------- */
.lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.96); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: calc(100vw - 160px); max-height: calc(100vh - 80px); object-fit: contain; }
.lightbox button { position: absolute; border: 0; background: none; cursor: pointer; color: #000; font: 300 40px/1 sans-serif; padding: 16px; }
.lb-close { top: 10px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }

/* -------- mobile --------
   Like the original, phones get Wix's 320px-wide mobile layout (a script in
   each page head sets the viewport to 320px on phones). The block positions
   for it live in the "@media (max-width: 750px)" part of each page's <style>
   block and of chrome.css. */
.m-only { display: none; }
@media (min-width: 751px) { body { min-width: 980px; } }
.sec { overflow-x: clip; }
@media (max-width: 750px) {
  body { min-width: 320px; }
  .d-only { display: none; }
  .m-only { display: block; }
  #SITE_HEADER { height: 61px; }
  .strip { display: block; }
  .strip > .col { flex: none; }

  /* hamburger + full-screen menu */
  .nav-toggle { display: block; left: calc(50% + 99px); top: 10px; width: 50px; height: 35px; padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 70; }
  .nav-toggle span { position: absolute; left: 14px; width: 22px; height: 2px; background: var(--red); transition: transform .2s, opacity .2s; }
  .nav-toggle span:nth-child(1) { top: 8px; }
  .nav-toggle span:nth-child(2) { top: 17px; }
  .nav-toggle span:nth-child(3) { top: 26px; }
  .nav-open .nav-toggle { position: fixed; }
  .nav-open .nav-toggle span { background: #000; }
  .nav-open .nav-toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  #site-nav { display: none; position: fixed; inset: 0; left: 0 !important; top: 0 !important; height: auto !important; background: #fff; overflow-y: auto; }
  .nav-open #site-nav { display: block; }
  #nav { display: block; width: 188px; height: auto; margin: 58px auto 0; }
  #nav > li { display: block; width: auto !important; padding: 0; }
  #nav > li > a, #nav .sub a {
    display: flex; align-items: center; justify-content: center; height: 56px; padding: 0;
    border: 0; background: none !important; font: 14px/1.4 var(--ff-poppins); letter-spacing: normal; color: #000;
  }
  #nav > li > a:hover, #nav > li.has-sub:hover > a { color: #000; }
  #nav > li > a[aria-current] { color: var(--red); border: 0; }
  #nav .sub { position: static; display: none; width: auto; margin: 0; padding: 0; }
  #nav li.has-sub:hover .sub, #nav li.has-sub:focus-within .sub { display: none; }
  #nav li.has-sub.open .sub { display: block; }
  #nav .sub li { margin: 0; }
  #nav .sub a { color: var(--red); }
  #nav .sub a[aria-current] { color: var(--red); text-decoration: underline; }
  .sub-toggle { display: flex; align-items: center; justify-content: center; position: absolute; left: 0; top: 0; width: 50px; height: 56px; padding: 0; border: 0; background: none; cursor: pointer; }
  .sub-toggle svg { width: 12px; height: 7px; fill: #000; transition: transform .2s; }
  .has-sub.open .sub-toggle svg { transform: rotate(180deg); }
  .nav-open { overflow: visible; }

  /* Wix mobile "back to top" button */
  .back-to-top { display: block; position: fixed; right: 20px; bottom: 40px; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 40; opacity: 0; visibility: hidden; transition: visibility 0s .5s, opacity .5s; }
  .back-to-top.show { opacity: 1; visibility: visible; transition: visibility 0s, opacity .5s; }
  .back-to-top svg { width: 100%; height: 100%; }
}
.back-to-top { display: none; }