/* 360bonsai.com, rebuilt from the classic Wix site (2016) to look the same.

   How it scales
   - Wix drew every page twice: a fixed 980 px desktop column and a 320 px phone layout. Both are kept.
   - 1rem = 10 design pixels. At 980 px and wider the desktop column is 98rem = 980 px, as on Wix.
     From 600 to 979 px the whole desktop design shrinks to fit (Wix scrolled sideways instead).
     Below 600 px the phone design (32rem) fills the screen, as Wix's viewport=320 did.
   - Most page parts sit at the exact Wix positions. Each one carries its desktop box as
     --x/--y/--w/--h and its phone box as --mx/--my/--mw/--mh (in rem), and its type size as --fs/--mfs.
     The column's own height is --page-h/--page-mh.
   - Fonts: Barlow stands in for DIN Next W01 Light (licensed to Wix only), Nunito Sans for Avenir LT 35 Light,
     Noto Serif for Droid Serif. All three are SIL Open Font License, files in /fonts. */

@font-face { font-family: Barlow; font-weight: 200; font-style: normal; font-display: swap; src: url(/fonts/barlow-latin-200-normal.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 200; font-style: italic; font-display: swap; src: url(/fonts/barlow-latin-200-italic.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/barlow-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: Barlow; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/barlow-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-weight: 300; font-style: normal; font-display: swap; src: url(/fonts/nunito-sans-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Noto Serif"; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/noto-serif-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Noto Serif"; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/noto-serif-latin-700-normal.woff2) format("woff2"); }

:root {
  --text: #605e5e;
  --dark: #2f2e2e;
  --grey: #a0a09f;
  --menu-on: #207ea9;
  --menu-hover: #97deff;
  --link: #0573a6;
  --button: #30bdff;
  --box: #ccefff;
  --box-light: #def4ff;
  --rule: #b3b3b3;
}

html { font-size: 10px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width: 979px) { html { font-size: calc(100vw / 98); } }
@media (max-width: 599px) { html { font-size: calc(100vw / 32); } }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--text); font: 200 1.6rem/1.2 Barlow, "Helvetica Neue", Arial, sans-serif; letter-spacing: .01em; overflow-x: hidden; }
h1, h2, h3, h4, h5, h6, p, ul { margin: 0; font-weight: inherit; font-size: inherit; }
a { color: inherit; }
img, video { display: block; }
b, strong { font-weight: 400; }
.serif { font-family: "Noto Serif", Georgia, serif; font-size: .95em; letter-spacing: 0; }
.serif b { font-weight: 700; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; z-index: 20; background: #fff; padding: 1rem; }
.skip:focus { left: 1rem; }

/* ---------------------------------------------------------------- header */

.site-header { position: relative; z-index: 10; height: 6.6rem; }
.topnav { position: absolute; left: 0; right: 0; top: var(--nav-top, 2.9rem); display: flex; height: 5rem; }
.topnav a { flex: 1 1 0; text-align: center; text-decoration: none; font-size: 1.6rem; line-height: 5rem; color: var(--grey); transition: color .4s; white-space: nowrap; }
/* Wix's stretched menu split the full window width in these proportions, one per item.
   Free Consultation is off the menu for now (parked/booking/); its share stays for when it comes back. */
.topnav a[href="/"], .topnav a[href="/about-excalibur"] { flex-grow: 215; }
.topnav a[href="/samples"] { flex-grow: 276; }
.topnav a[href="/book-online"] { flex-grow: 294; }
.topnav a[href="/shop"] { flex-grow: 210; }
.topnav a[href="/support-1"] { flex-grow: 230; }
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--dark); }
.home .topnav { display: none; }

.menu-button, .phone-menu { display: none; }

@media (max-width: 599px) {
  .site-header { height: 7.4rem; }
  .topnav { display: none; }
  .menu-button { display: block; position: absolute; left: 2rem; top: 1.6rem; width: 4.8rem; height: 4.8rem; padding: 0; border: .1rem solid #fff; border-radius: .4rem; background: #605e5e; cursor: pointer; }
  .menu-button span, .menu-button span::before, .menu-button span::after { position: absolute; left: 1.4rem; width: 2rem; height: .3rem; background: #fff; content: ""; transition: transform .2s; }
  .menu-button span { top: 2.25rem; }
  .menu-button span::before { left: 0; top: -.7rem; }
  .menu-button span::after { left: 0; top: .7rem; }
  .menu-button[aria-expanded="true"] span { background: transparent; }
  .menu-button[aria-expanded="true"] span::before { transform: translateY(.7rem) rotate(45deg); }
  .menu-button[aria-expanded="true"] span::after { transform: translateY(-.7rem) rotate(-45deg); }
  .phone-menu { position: absolute; left: 2rem; top: 6.4rem; width: 28rem; margin: 0; padding: 0; list-style: none; border: .1rem solid #fff; }
  .phone-menu.open { display: block; }
  .phone-menu li { border-bottom: .1rem solid #fff; background: rgba(96, 94, 94, .95); }
  .phone-menu li:last-child { border-bottom: 0; }
  .phone-menu a { display: block; height: 4.8rem; padding-left: 1.7rem; font: 400 1.6rem/4.8rem Arial, Helvetica, sans-serif; letter-spacing: 0; color: #fff; text-decoration: none; }
  .phone-menu a[aria-current="page"] { background: var(--grey); }
}

/* ---------------------------------------------------------------- page column */

.page { position: relative; width: 98rem; height: calc(var(--page-h) * 1rem); margin: 0 auto; }
/* Wix let a few lines run past the 980 px column; on narrow windows they are cut at the window edge. */
@media (max-width: 979px) { .page { overflow-x: clip; } }
.site-footer { height: 1.4rem; }
/* An unset --h or --mh makes the height rule invalid, so the box keeps its natural height. */
.at {
  position: absolute;
  left: calc(var(--x) * 1rem); top: calc(var(--y) * 1rem); width: calc(var(--w) * 1rem); height: calc(var(--h) * 1rem);
  font-size: calc(var(--fs, 1.6) * 1rem);
}
.only-phone { display: none; }

@media (max-width: 599px) {
  .page { width: 32rem; height: calc(var(--page-mh) * 1rem); }
  .site-footer { height: 5.1rem; }
  .at {
    left: calc(var(--mx) * 1rem); top: calc(var(--my) * 1rem); width: calc(var(--mw) * 1rem); height: calc(var(--mh) * 1rem);
    font-size: calc(var(--mfs, var(--fs, 1.6)) * 1rem);
  }
  .only-desktop { display: none !important; }
  .only-phone { display: block; }
}

/* ---------------------------------------------------------------- home */

.vmenu { margin: 0; padding: 0; list-style: none; }
.vmenu a { display: block; height: 5.3rem; text-align: center; text-decoration: none; font-size: 2.1rem; line-height: 5.3rem; color: var(--dark); transition: background-color .4s; }
.vmenu a:hover { background: var(--menu-hover); }
.vmenu a[aria-current="page"] { background: var(--menu-on); color: #fff; }
@media (max-width: 599px) { .vmenu { display: none; } }

.slideshow { overflow: hidden; background: #000; }
.slideshow .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; }
.slideshow .slide.on { opacity: 1; }
.slideshow img, .slideshow video { width: 100%; height: 100%; object-fit: cover; }
.slideshow .left { object-position: left center; }
.slide-arrow { position: absolute; top: 50%; z-index: 2; width: 3.2rem; height: 3.2rem; margin-top: -1.6rem; padding: 0; border: 0; background: #fff; cursor: pointer; }
.slide-arrow svg { width: 100%; height: 100%; fill: #605e5e; }
.slide-arrow.prev { left: .2rem; }
.slide-arrow.next { right: .2rem; transform: scaleX(-1); }
.slide-dots { position: absolute; left: 0; right: 0; bottom: 2.2rem; z-index: 2; display: flex; justify-content: center; gap: 1.6rem; }
.slide-dots button { width: .6rem; height: .6rem; padding: 0; border: 0; background: rgba(255, 255, 255, .6); cursor: pointer; }
.slide-dots button[aria-current="true"] { background: #fff; }
@media (max-width: 599px) {
  .slide-arrow { width: 3rem; height: 3rem; margin-top: -1.5rem; }
  .slide-arrow.prev { left: .7rem; }
  .slide-arrow.next { right: .7rem; }
  .slide-dots { display: none; }
}

#brand { text-align: center; }
@media (max-width: 599px) { #brand { text-align: left; } }

/* ---------------------------------------------------------------- about */

.lines > span { display: block; }
@media (max-width: 599px) { .lines > span { display: inline; } }
.dashed { border-top: .1rem dashed var(--grey); height: 0; }
.gallery { overflow: hidden; }
.gallery-track { position: absolute; left: 3.5rem; top: 0; display: flex; gap: 1.5rem; transition: transform .5s; }
.gallery-track img { width: 32rem; height: 32rem; border-radius: 50%; object-fit: cover; background: #fff; }
.gallery button { position: absolute; top: 6.4rem; z-index: 2; width: 4.5rem; height: 19.2rem; padding: 0; border: 0; background: none; cursor: pointer; opacity: .9; }
.gallery button svg { width: 2.4rem; height: 4.8rem; fill: none; stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 0 .2rem rgba(0, 0, 0, .5)); }
.gallery .back { left: -.5rem; }
.gallery .forward { right: -.5rem; }
@media (max-width: 599px) { .gallery-track { left: 0; } }
.blue-box { background: var(--box-light); }
.bubble { border: .6rem solid #7b736f; background: #fff; }
.bubble::after { position: absolute; left: 4.4rem; bottom: -1.6rem; border: 1rem solid transparent; border-top-color: #7b736f; content: ""; }
.bubble a { font-weight: 400; }

/* ---------------------------------------------------------------- shop */

.video-box { border: 1rem solid #ccc; box-sizing: content-box; transform: translate(-1rem, -1rem); }
.video-box video, .video-box img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 599px) { .video-box { border-width: .8rem; transform: translate(-.8rem, -.8rem); } }
.feature-box { background: var(--box); color: #000; }
.feature-box .inner { position: absolute; left: .8rem; right: .8rem; top: calc(var(--t, 2.8) * 1rem); font-size: 2.1rem; line-height: 2.94rem; letter-spacing: .03rem; }
.feature-box h2 { text-align: center; margin-bottom: 2.94rem; }
.feature-box ul { padding-left: 3.6rem; }
.feature-box ul + ul { margin-top: 2.94rem; }
@media (max-width: 599px) { .feature-box .inner { left: 1rem; right: 1rem; top: calc(var(--mt, 1) * 1rem); } }

.products { display: grid; grid-template-columns: repeat(3, 29rem); column-gap: 3rem; }
.product-card { display: block; text-decoration: none; color: var(--dark); font-size: 1.4rem; line-height: 2.7rem; }
.product-card img { width: 29rem; height: 29rem; object-fit: contain; margin-bottom: .8rem; }
.product-card .price { color: #828282; }
@media (max-width: 599px) {
  .products { grid-template-columns: 28rem; row-gap: 2.4rem; }
  .product-card { font-size: 1.4rem; line-height: 2.2rem; }
  .product-card img { width: 28rem; height: 28rem; margin-bottom: 0; }
}

/* ---------------------------------------------------------------- store and booking pages (Wix apps, so flow layout) */

.app { width: 98rem; margin: 0 auto; color: var(--dark); font-size: 1.4rem; font-weight: 300; }
/* Wix's store and booking apps drew small type heavier than the page text, so these use Barlow Light. */
.services, .product-card { font-weight: 300; }
.app .wrap { width: 90rem; margin: 0 auto; padding-top: 4.2rem; }
.crumbs { display: flex; justify-content: space-between; font-size: 1.4rem; line-height: 2.4rem; }
.crumbs a { text-decoration: none; }
.crumbs .here { color: #888; }
.crumbs nav { display: flex; align-items: center; }
.crumbs nav a { display: flex; align-items: center; gap: .6rem; padding: 0 1rem; }
.crumbs nav a + a { border-left: .1rem solid var(--dark); }
.crumbs nav svg { width: .8rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.2; }
.crumbs .disabled { color: #999; pointer-events: none; }
.product { display: grid; grid-template-columns: 58.8rem 28rem; justify-content: space-between; margin-top: 3.8rem; }
.product-image img { width: 45rem; height: 45rem; margin: 0 auto; object-fit: contain; }
.product h1 { font-size: 3.2rem; line-height: 3.8rem; margin-top: 1.6rem; }
.product .price { font-size: 2.4rem; margin: 1.6rem 0 2.4rem; }
.product .description { font-size: 1.4rem; line-height: 2.25rem; letter-spacing: .03em; max-height: 6.75rem; overflow: hidden; }
.product .description p + p { margin-top: 2.25rem; }
.product .description.open { max-height: none; }
.read-more { display: inline-block; margin: .4rem 0 2.8rem; padding: 0; border: 0; background: none; font: inherit; font-size: 1.4rem; color: var(--dark); text-decoration: underline; cursor: pointer; }
.button { display: inline-block; height: 4rem; padding: 0 3.2rem; background: var(--button); color: #fff; font-size: 1.4rem; line-height: 4rem; text-align: center; text-decoration: none; transition: opacity .2s; }
.button:hover { opacity: .85; }
.product .button { display: block; width: 100%; }
.share { display: flex; gap: 1.8rem; margin-top: 5.4rem; }
.share a { display: block; width: 2rem; height: 2rem; }
.share svg { width: 100%; height: 100%; }
.info { display: grid; grid-template-columns: 1fr 1fr; margin: 10.4rem 0 3.4rem; }
.info section { padding-right: 3rem; }
.info section + section { padding: 0 0 0 3rem; border-left: .1rem solid var(--dark); }
.info h2 { font-size: 1.8rem; line-height: 4.2rem; }
.info .body { font-size: 1.3rem; line-height: 2.1rem; margin-top: .6rem; }
.info ul { padding-left: 2.8rem; }
.back-link { display: none; }

.service { width: 72rem; margin: 0 auto; padding-top: 6.6rem; }
.service h1 { font-size: 4rem; line-height: 4.8rem; }
.facts { display: inline-flex; margin: 3.6rem 0 3.2rem; border: .1rem solid #d5d5d5; font-size: 1.5rem; }
.facts span { padding: 1.8rem 1.6rem; }
.facts span + span { border-left: .1rem solid #d5d5d5; }
.service .button { padding: 0 3.2rem; width: 13.2rem; }
.service hr { border: 0; border-top: .1rem solid #d5d5d5; margin: 3.2rem 0 0; }
.service h2 { font-size: 2rem; margin-top: 3.4rem; }
.service p, .service address { font-size: 1.4rem; line-height: 2.4rem; font-style: normal; margin-top: 1.6rem; }
.service .tree { width: 22.5rem; height: auto; margin: 5.2rem 0 1rem; }
.service .contact { margin-bottom: 3.2rem; }

.services { position: absolute; left: 3rem; top: 22.6rem; width: 94rem; border-top: .1rem solid var(--rule); border-bottom: .1rem solid var(--rule); padding: 3.4rem 0 3.2rem; color: var(--dark); }
.services h2 { font-size: 2.2rem; }
.services h2 a { text-decoration: none; }
.services .more { display: inline-block; margin: 1.6rem 0 1.6rem; font-size: 1.4rem; }
.services p { font-size: 1.4rem; line-height: 3.2rem; }
.services .button { margin-top: 1.6rem; padding: 0 1.6rem; }

@media (max-width: 599px) {
  .app { width: 32rem; }
  .app .wrap { width: 24rem; padding-top: 1.2rem; }
  .crumbs > div, .crumbs nav { display: none; }
  .back-link { display: flex; align-items: center; gap: .8rem; font-size: 1.4rem; text-decoration: none; }
  .back-link svg { width: .8rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.2; }
  .product { grid-template-columns: 24rem; margin-top: 2rem; }
  .product-image img { width: 24rem; height: 24rem; }
  .product h1 { font-size: 2.6rem; line-height: 3.4rem; margin-top: 2rem; }
  .product .price { font-size: 1.4rem; margin: 1.2rem 0 4rem; }
  .product-info { display: flex; flex-direction: column; }
  .product-info h1 { order: 1; } .product-info .price { order: 2; } .product-info .buy { order: 3; margin-bottom: 3.2rem; }
  .product-info .description { order: 4; } .product-info .read-more { order: 5; align-self: flex-start; } .product-info .share { order: 6; }
  .info { grid-template-columns: 24rem; margin: 3.2rem 0; }
  .info section, .info section + section { padding: 1.2rem 0; border-left: 0; border-top: .1rem solid #ddd; }
  .info h2 { font-size: 1.6rem; line-height: 2.4rem; }
  .share { margin-top: 3.2rem; }
  .service { width: 28rem; padding-top: 6.9rem; }
  .service h1 { font-size: 3.2rem; line-height: 4.4rem; }
  .service .tree { width: 13.4rem; margin: 5.4rem 0; }
  .services { left: 4rem; top: 29.3rem; width: 24rem; border: .1rem solid #ccc; padding: 2.4rem 2rem; }
  .services h2 { font-size: 2rem; }
  .services .button { display: block; margin-top: 2rem; }
}

/* ---------------------------------------------------------------- samples, support */

.samples-title { font-family: "Nunito Sans", Avenir, sans-serif; font-weight: 300; color: #292929; letter-spacing: 0; white-space: nowrap; }
.embed { background: #000; }
.embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-head { border-bottom: .1rem solid var(--grey); padding-bottom: .4rem; text-transform: none; }
.contact-text { text-align: center; line-height: 1.25; }
.contact-text .lead { font-size: 1.12em; }
@media (max-width: 599px) { .contact-text .lead { font-size: 1.04em; } }
.contact-text a { color: var(--link); text-decoration: none; }
.contact-text a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- 404 */

.not-found { text-align: center; padding: 8rem 2rem 12rem; }
.not-found h1 { font-size: 4rem; margin-bottom: 2rem; }
.not-found a { color: var(--link); }