/* parts: /style.css /assets/css/header.css /assets/css/footer.css /assets/css/socials.css */
/* /style.css */
/**
Theme Name: Click Wise Design
Author: Click Wise Design
Author URI: https://clickwisedesign.com
Description: Custom WordPress theme by Click Wise Design.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: click-wise-design
Template: astra
*/

:root {
  --br: 10px;
  --shadow: 0 2px 1rem -4px rgba(0, 0, 0, 0.2);
}

html,
body {
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

@view-transition {
  navigation: auto;
}

.line-grow-left .wp-block-uagb-separator__inner {
  position: relative;
  display: block;
  width: 0%;
  opacity: 0;
  transform-origin: right;
  animation:
    growFromRight 1s ease-out forwards,
    fadeIn 0.5s ease-out forwards;
}

@keyframes growFromRight {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

/* fix contact form not filling width */
.wp-block-uagb-container.uagb-layout-grid > .uagb-block-c6506a5e.uagb-is-root-container {
  width: 100% !important;
}

.uagb-block-9a97d13d > .wp-block-uagb-container {
  transition-property: background-color, transform, translate, opacity !important;
  transition-duration: 150ms !important;
  transition-timing-function: ease-in-out !important;
}

.uagb-block-9a97d13d > .wp-block-uagb-container:hover {
  background-color: color-mix(in srgb, var(--ast-global-color-1) 10%, var(--ast-global-color-7)) !important;
  translate: 0 -0.25rem !important;
}

.wp-block-uagb-container.uagb-block-712b80e8::before {
  height: calc(100%) !important;
}

.bg-dots,
.bg-grid {
  position: relative;
  z-index: 0;
}

.bg-dots::after,
.bg-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: var(--spacing) var(--spacing);
}

.bg-dots::after {
  --spacing: 1.5rem;

  opacity: 0.25;
  background-image: radial-gradient(white 1px, transparent 1px), radial-gradient(white 1px, transparent 1px);
  background-position: center;
}

.bg-grid::after {
  --spacing: 2rem;
  --color: #fff;

  opacity: 0.2;
  background-image:
    linear-gradient(to right, var(--color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 50% 80% at 50% 0%, #000 80%, transparent 110%);
  mask-image: radial-gradient(ellipse 50% 80% at 50% 0%, #000 80%, transparent 110%);
}

.swoosh {
  position: relative;
}

.swoosh::after {
  content: "";
  width: 100%;
  height: clamp(32px, 7vw, 96px);
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: var(--ast-global-color-7);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C460,100 1080,20 1440,30 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E")
    no-repeat center bottom;
  -webkit-mask-size: 100% 100%;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,20 C460,100 1080,20 1440,30 L1440,80 L0,80 Z' fill='%23000'/%3E%3C/svg%3E")
    no-repeat center bottom;
  mask-size: 100% 100%;
  pointer-events: none;
}

.center-up {
  translate: 0% -50%;
}

.uagb-icon-margin-wrapper {
  display: flex;
}

#work-gallery {
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ast-global-color-0) 7%, var(--ast-global-color-7))
      color-mix(in srgb, var(--ast-global-color-0) 10%, var(--ast-global-color-7))
  );
}

#services > div {
  position: relative;
  overflow: hidden;
  transition-property: background-color, border-color, transform, opacity, scale !important;
  transition-duration: 150ms !important;
  transition-timing-function: ease-in-out !important;
}

#services > div::after {
  content: "";
  width: 200%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  position: absolute;
  top: 0;
  left: -200%;
  transition: left 300ms ease-in-out;
}

#services > div:hover::after {
  left: 0%;
}

#services > div:hover {
  background-color: color-mix(in srgb, var(--ast-global-color-0) 10%, var(--ast-global-color-6)) !important;
  scale: 1.05;
}

.w-l .uagb-container-inner-blocks-wrap {
  max-width: min(100%, 1800px) !important;
}

#service-sidebar {
  background-color: color-mix(in srgb, var(--ast-global-color-0) 60%, #000) !important;
}

#service-sidebar .wp-block-uagb-icon-list-child {
  padding-top: 20px;
  border-bottom: solid 1px white;
  width: 100%;
  padding-bottom: 20px;
  transition: padding-left 0.3s ease;
  padding-left: 0;
  margin-bottom: 0;
}

#service-sidebar .wp-block-uagb-icon-list-child span {
  text-align: left;
}

#service-sidebar .wp-block-uagb-icon-list-child::before {
  content: "→";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translate(-10px, -50%);
  opacity: 0;
  margin-right: 0.3em;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  color: white;
}

#service-sidebar .wp-block-uagb-icon-list-child:hover::before,
#service-sidebar .wp-block-uagb-icon-list-child.active::before {
  opacity: 1;
  transform: translate(0, -50%);
}

#service-sidebar:has(.wp-block-uagb-icon-list-child:hover) .wp-block-uagb-icon-list-child.active:not(:hover)::before {
  opacity: 0;
  transform: translate(-10px, -50%);
}

#service-sidebar h2::after {
  content: "";
  background-color: white;
  height: 4px;
  width: 70%;
  display: block;
}

.wp-block-uagb-container.uagb-layout-grid > .wp-block-uagb-container {
  width: 100% !important;
}

.safe-svg-inline path {
  fill: var(--ast-global-color-0) !important;
  stroke: var(--ast-global-color-0) !important;
}

.uagb-post-grid.is-grid.uagb-post__image-position-top .uagb-post__image a[class^="uagb-image-ratio-"] > img {
  max-width: 390px !important;
  height: 300px !important;
}

@media (max-width: 576px) {
  .uagb-block-7b68d00c > div:nth-child(1) {
    align-items: start !important;
  }
}

.solid-hero {
  background-color: color-mix(in srgb, var(--ast-global-color-0) 85%, #000) !important;
}

/* /assets/css/header.css */
/* Header and mobile drawer (markup in inc/header.php). Deliberately not on the
   Astra palette: only the accent follows it, so the bar stays dark. */
.cwd-header {
  --cwd-header-bg: #000000;
  --cwd-header-bg-opacity: 25;
  --cwd-header-text: #ffffff;
  --cwd-header-accent: var(--ast-global-color-0);
  --cwd-header-width: 1800px;
  --cwd-header-logo-width: 230px;
  /* Breathing room above and below the bar logo, whatever its height. */
  --cwd-header-logo-space: 16px;
  --cwd-header-blur: 0px;
  --cwd-header-muted: color-mix(in srgb, var(--cwd-header-text) 70%, transparent);
  --cwd-header-line: color-mix(in srgb, var(--cwd-header-text) 18%, transparent);
  --cwd-header-divider: color-mix(in srgb, var(--cwd-header-text) 20%, transparent);

  position: relative;
  width: 100%;
  z-index: 100;
  color: var(--cwd-header-text);
  font-size: 16px;
  line-height: 1.5;
}

/* Only `inline` reserves space; the other two overlay so a hero runs underneath. */
.cwd-header--over,
.cwd-header--fixed {
  position: absolute;
  top: 0;
  left: 0;
}

.cwd-header--fixed {
  position: fixed;
}

/* Only `fixed` is positioned against the viewport; core already offsets the page. */
body.admin-bar .cwd-header--fixed {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .cwd-header--fixed {
    top: 46px;
  }
}

/* Positioned so the toggle centres on the bar, not on the whole header. */
.cwd-header__bar {
  position: relative;
  background-color: color-mix(in srgb, var(--cwd-header-bg) calc(var(--cwd-header-bg-opacity) * 1%), transparent);
}

/* One layer behind the strip and the bar, so both blur as a single surface
   with no seam between them. It also keeps backdrop-filter off the bar, which
   would make the bar a stacking context and trap the toggle below the drawer.
   Gated on the class, not `blur(0)`: a zero blur still costs a compositor layer. */
.cwd-header--blur::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(var(--cwd-header-blur));
  -webkit-backdrop-filter: blur(var(--cwd-header-blur));
}

.cwd-header--blur .cwd-header__submenu {
  backdrop-filter: blur(var(--cwd-header-blur));
  -webkit-backdrop-filter: blur(var(--cwd-header-blur));
}

/* Same surface formula as the bar, so unless its colors are overridden
   (inc/header-settings.php scopes them here) the two read as one. The derived
   colors are restated: a custom property inherits already resolved, so an
   overridden text color would not otherwise reach them. */
.cwd-header__above {
  --cwd-header-muted: color-mix(in srgb, var(--cwd-header-text) 70%, transparent);
  --cwd-header-line: color-mix(in srgb, var(--cwd-header-text) 18%, transparent);
  --cwd-header-divider: color-mix(in srgb, var(--cwd-header-text) 20%, transparent);

  background-color: color-mix(in srgb, var(--cwd-header-bg) calc(var(--cwd-header-bg-opacity) * 1%), transparent);
  color: var(--cwd-header-text);
  font-size: 14px;
}

/* Same width and gutters as the bar, so its edges line up with the logo and menu. */
.cwd-header__above-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 24px;
  max-width: var(--cwd-header-width);
  min-height: 40px;
  margin-inline: auto;
  padding: 8px 32px;
}

.cwd-header__above-inner:has(> :nth-child(2)) {
  justify-content: space-between;
}

/* Widget content is arbitrary blocks, treated the same in both areas: laid
   out as one row that wraps, at header text size. */
.cwd-header__widget {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  min-width: 0;
}

.cwd-header__widget :is(p, h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.cwd-header__widget :is(h1, h2, h3, h4, h5, h6, strong, b),
.cwd-header__widget-title {
  font-weight: 700;
}

.cwd-header__widget :is(ul, ol) {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cwd-header__widget li {
  margin: 0;
}

.cwd-header__widget :is(img, svg) {
  display: block;
  width: auto;
  max-height: 32px;
}

/* Blocks with their own layout: drop the spacing they bring for page content. */
.cwd-header__widget :is(.wp-block-buttons, .wp-block-social-links, .wp-block-image, .wp-block-group, .wp-block-columns) {
  margin: 0;
}

/* Buttons keep the block's own colors. */
.cwd-header__widget a:not(.cwd-button, .wp-block-button__link, .wp-block-social-link-anchor) {
  color: var(--cwd-header-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 4px;
  transition: text-decoration-color 150ms ease-in-out;
}

.cwd-header__widget a:not(.cwd-button, .wp-block-button__link, .wp-block-social-link-anchor):hover {
  text-decoration-color: var(--cwd-header-accent);
}

/* Each item after the first leads with the same rule the row uses between socials and hours. */
.cwd-header__top-item + .cwd-header__top-item::before {
  content: "";
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  margin-inline-end: 4px;
  background-color: var(--cwd-header-divider);
}

.cwd-header__inner {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: var(--cwd-header-width);
  margin-inline: auto;
  padding-inline: 32px;
}

.cwd-header__stack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.cwd-header__row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.cwd-header__row--top {
  position: relative;
  flex-wrap: wrap;
  min-height: 46px;
  padding-block: 6px;
  font-size: 14px;
}

/* A sized box, not a border: a border runs the full column into the header's edge. */
.cwd-header__row--top::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  width: 78%;
  max-width: 880px;
  height: 1px;
  background-color: var(--cwd-header-line);
}

.cwd-header__follow {
  margin: 0;
  font-weight: 700;
}

.cwd-header__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 20px;
  background-color: var(--cwd-header-divider);
}

.cwd-header__hours {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cwd-header-muted);
}

.cwd-header__hours-icon {
  color: var(--cwd-header-text);
  font-size: 16px;
  line-height: 1;
}

.cwd-header__hours .cwd-business-hours p {
  margin: 0;
  color: inherit;
}

.cwd-header__hours .cwd-business-hours__missing {
  font-style: italic;
}

.cwd-header__row--main {
  flex-wrap: nowrap;
  gap: 32px;
  min-height: 76px;
}

.cwd-header__logo {
  display: inline-flex;
  flex: 0 0 auto;
}

/* The bar only: the drawer's logo sits in a head row that sets its own height. */
.cwd-header__bar .cwd-header__logo {
  padding-block: var(--cwd-header-logo-space);
}

.cwd-header .cwd-header__logo-img {
  display: block;
  width: var(--cwd-header-logo-width);
  max-width: 100%;
  height: auto;
}

.cwd-header__logo-text {
  color: var(--cwd-header-text);
  font-size: 28px;
  font-weight: 700;
}

/* Never shrinks: header.js only notices the call to action no longer fits if the row overflows. */
.cwd-header__nav {
  display: flex;
  flex: 0 0 auto;
  align-self: stretch;
}

.cwd-header__menu {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cwd-header__menu li {
  position: relative;
  margin: 0;
}

.cwd-header__menu a {
  display: inline-block;
  padding-block: 8px;
  color: var(--cwd-header-text);
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
  transition: color 150ms ease-in-out;
}

.cwd-header__menu a:hover,
.cwd-header__menu .current-menu-item > a,
.cwd-header__menu .current-menu-ancestor > a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  text-decoration-color: var(--cwd-header-accent);
}

.cwd-header__submenu {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}

.cwd-header__submenu a {
  font-size: 16px;
  font-weight: 500;
}

/* The submenu paints the accent as its own background, so an accent underline would vanish. */
.cwd-header__submenu a:hover,
.cwd-header__submenu .current-menu-item > a,
.cwd-header__submenu .current-menu-ancestor > a {
  text-decoration-color: var(--cwd-header-text);
}

.cwd-header__submenu-toggle {
  display: none;
}

@media (min-width: 922px) {
  /* Wrapping is the last resort: header.js drops the call to action first. */
  .cwd-header__menu {
    flex-wrap: nowrap;
  }

  .cwd-header__menu > li > a {
    white-space: nowrap;
  }

  /* Items fill the row, so the dropdown's `top: 100%` is the header's bottom edge: no seam.
     A logo taller than the rows leaves slack; the main row takes it (half, with a top row,
     so the top row stays where centring put it) to keep reaching that edge. The basis is
     the row's min-height: from `auto` the min-height would eat into its share. */
  .cwd-header__stack {
    align-self: stretch;
  }

  .cwd-header__stack:has(> .cwd-header__row--top)::before {
    content: "";
    flex: 1 1 0;
  }

  .cwd-header__row--main {
    flex: 1 0 76px;
  }

  .cwd-header__menu {
    align-items: stretch;
    gap: 6px;
  }

  .cwd-header__menu > li {
    display: flex;
    align-items: center;
  }

  .cwd-header__menu > li > a {
    display: flex;
    align-items: center;
    height: 100%;
    padding-block: 0;
    padding-inline: 14px;
  }

  .cwd-header--wrap .cwd-header__menu {
    flex-wrap: wrap;
  }

  .cwd-header--wrap .cwd-header__nav {
    flex: 0 1 auto;
    min-width: 0;
  }

  .cwd-header__menu > .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 150ms ease-in-out;
  }

  .cwd-header__menu > .menu-item-has-children:hover > a::after,
  .cwd-header__menu > .menu-item-has-children:focus-within > a::after {
    transform: rotate(225deg) translate(-2px, -2px);
  }

  .cwd-header__nav .cwd-header__submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 20;
    display: grid;
    grid-template-columns: minmax(210px, 1fr);
    /* No row gap: the separators are the row boundary and would float inside a gap. */
    column-gap: 22px;
    row-gap: 0;
    padding: 10px;
    /* Never sheer: a dropdown sits over body copy, so 76% is the floor whatever the bar is set to. */
    background-color: color-mix(in srgb, var(--cwd-header-bg) max(calc(var(--cwd-header-bg-opacity) * 1%), 76%), transparent);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    translate: -50% 8px;
    transition:
      opacity 150ms ease-in-out,
      translate 150ms ease-in-out,
      visibility 150ms;
  }

  /* Width floor per column: with a bare `1fr` the shrink-to-fit panel splits and wraps every label. */
  .cwd-header__nav .cwd-header__submenu:has(> :nth-child(3)) {
    grid-template-columns: repeat(2, minmax(244px, 1fr));
  }

  .cwd-header__nav .cwd-header__submenu:has(> :nth-child(9)) {
    grid-template-columns: repeat(3, minmax(232px, 1fr));
  }

  .cwd-header__nav .menu-item-has-children:hover > .cwd-header__submenu,
  .cwd-header__nav .menu-item-has-children:focus-within > .cwd-header__submenu {
    opacity: 1;
    visibility: visible;
    translate: -50% 0;
  }

  /* Padding belongs to the link, not the `li`, where it is dead space that looks clickable. */
  .cwd-header__nav .cwd-header__submenu li {
    display: flex;
    padding: 0;
  }

  .cwd-header__nav .cwd-header__submenu a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 13px 16px;
    border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    font-size: 17px;
    transition:
      background-color 150ms ease-in-out,
      color 150ms ease-in-out;
  }

  /* Colour, not the border: dropping it would change row height and unbalance the columns. */
  .cwd-header__nav .cwd-header__submenu li:last-child > a {
    border-bottom-color: transparent;
  }

  .cwd-header__nav .cwd-header__submenu:has(> :nth-child(3)) li:nth-last-child(-n + 2) > a {
    border-bottom-color: transparent;
  }

  .cwd-header__nav .cwd-header__submenu:has(> :nth-child(9)) li:nth-last-child(-n + 3) > a {
    border-bottom-color: transparent;
  }

  .cwd-header__nav .cwd-header__submenu a:hover {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    text-decoration: none;
  }
}

/* Scoped to `.cwd-header` to beat the block stylesheet, which loads after the
   theme's. The label has to be stated: the block hardcodes `#fff`. */
.cwd-header .cwd-header__cta {
  --accent-color: var(--cwd-header-text);

  flex: 0 0 auto;
  border-radius: 0;
  box-shadow: none;
  color: var(--cwd-header-text);
  white-space: nowrap;
  text-decoration: none;
}

.cwd-header .cwd-header__cta:hover,
.cwd-header .cwd-header__cta:focus-visible {
  --accent-color: var(--cwd-header-accent);

  box-shadow: none;
  color: var(--cwd-header-text);
}

/* header.js measures the row and toggles this; the panel repeats the button. */
.cwd-header--compact .cwd-header__row--main .cwd-header__cta {
  display: none;
}

.cwd-header__call {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--cwd-header-accent);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}

/* Astra's button hover/focus selectors out-specify a plain class, so state all three. */
.cwd-header__toggle,
.cwd-header__toggle:hover,
.cwd-header__toggle:focus,
.cwd-header__submenu-toggle,
.cwd-header__submenu-toggle:hover,
.cwd-header__submenu-toggle:focus {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cwd-header-text);
  cursor: pointer;
}

/* Positioned against the bar. Not trapped below the drawer: the bar is not a stacking context. */
.cwd-header__toggle {
  position: absolute;
  top: 50%;
  right: 16px;
  z-index: 120;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  translate: 0 -50%;
}

/* Fixed while the drawer is open: the header may be scrolled out of view by then.
   header.js measures the position first, so the swap is invisible. */
body.cwd-header-open .cwd-header__toggle {
  position: fixed;
  top: var(--cwd-toggle-top, 14px);
  translate: none;
}

.cwd-header__toggle-bar {
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--cwd-header-text);
  transition:
    transform 150ms ease-in-out,
    opacity 150ms ease-in-out;
}

.cwd-header__toggle[aria-expanded="true"] .cwd-header__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.cwd-header__toggle[aria-expanded="true"] .cwd-header__toggle-bar:nth-child(2) {
  opacity: 0;
}

.cwd-header__toggle[aria-expanded="true"] .cwd-header__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* header.js writes the drag offset to the element's own `translate`; this owns the release. */
.cwd-header__scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 240ms ease-out;
}

.cwd-header__scrim[hidden] {
  display: none;
}

.cwd-header__scrim.is-open {
  opacity: 1;
}

.cwd-header__scrim.is-dragging {
  transition: none;
}

.cwd-header__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(86vw, 420px);
  padding: calc(16px + var(--cwd-admin-overlap, 0px)) 24px calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  /* The blur is unconditional even when the bars are set flat: the drawer needs it for contrast. */
  background-color: color-mix(in srgb, var(--cwd-header-bg) 80%, transparent);
  backdrop-filter: blur(max(var(--cwd-header-blur, 0px), 20px)) saturate(140%);
  -webkit-backdrop-filter: blur(max(var(--cwd-header-blur, 0px), 20px)) saturate(140%);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.45);
  touch-action: pan-y;
  translate: 100% 0;
  transition: translate 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

.cwd-header__panel[hidden] {
  display: none;
}

.cwd-header__panel.is-open {
  translate: 0 0;
}

/* While a finger is down the sheet tracks it exactly; animating would lag. */
.cwd-header__panel.is-dragging {
  transition: none;
}

/* The drawer scrolls instead: without this, content taller than the viewport
   (an opened submenu) shrinks the head row to its 44px floor and the logo
   spills up over the top padding. */
.cwd-header__panel > * {
  flex-shrink: 0;
}

.cwd-header__panel-head {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 20px;
  /* Clear of the toggle, which floats over this corner. */
  padding-right: 52px;
}

.cwd-header .cwd-header__panel .cwd-header__logo-img {
  width: min(160px, var(--cwd-header-logo-width));
}

/* Holds the socials and the docked contact bar. The auto margin sits on the
   group, so the bar stays on the bottom edge with or without social links. */
.cwd-header__panel-foot {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: auto;
  padding-top: 28px;
}

.cwd-header__panel-foot:empty {
  display: none;
}

/* The plugin's scroll-to-top button is fixed to this corner at z-index 9999,
   where it would swallow the taps meant to close the drawer. */
body.cwd-header-open #cwd-scroll-top {
  opacity: 0;
  visibility: hidden;
}

/* `translate`, not `transform`: the plugin centres the bar with
   `transform: ... !important`, and the two properties compose instead of fighting. */
body #sticky-wrapper {
  transition: translate 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

body.cwd-header-open #sticky-wrapper {
  translate: 0 100%;
}

.cwd-header__contact {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 6px;
  border-radius: 12px;
  background-color: var(--cwd-header-accent);
  translate: 0 calc(100% + 32px);
  transition: translate 300ms cubic-bezier(0.32, 0.72, 0, 1);
}

.cwd-header__panel.is-open .cwd-header__contact {
  transition-delay: 140ms;
  translate: 0 0;
}

.cwd-header__contact a,
.cwd-header__contact a:hover,
.cwd-header__contact a:focus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.cwd-header__contact a:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

.cwd-header__contact i {
  font-size: 18px;
}

/* Lock the root, not `body`: body is not the scroll container here, and making it
   one shifts the page sideways on any layout wider than the viewport. */
html:has(body.cwd-header-open) {
  overflow: hidden;
}

.cwd-header a:focus-visible,
.cwd-header button:focus-visible {
  outline: 2px solid var(--cwd-header-accent);
  outline-offset: 3px;
}

@media (max-width: 921px) {
  .cwd-header__above-inner,
  .cwd-header__above-inner:has(> :nth-child(2)) {
    justify-content: center;
    gap: 4px 16px;
    min-height: 36px;
    padding: 6px 16px;
    text-align: center;
  }

  /* The first column is reserved even without a phone number, so the logo stays centred. */
  .cwd-header__inner {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding-inline: 16px;
    --cwd-header-logo-space: 12px;
  }

  .cwd-header__call {
    display: inline-flex;
    grid-column: 1;
  }

  .cwd-header__logo {
    grid-column: 2;
    justify-self: center;
  }

  .cwd-header__stack {
    display: none;
  }

  .cwd-header .cwd-header__logo-img {
    width: min(200px, var(--cwd-header-logo-width));
  }

  /* Positioned against the header, not in the bar's grid; the third column is left empty for it. */
  .cwd-header__toggle {
    display: flex;
  }

  .cwd-header__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .cwd-header__menu > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid color-mix(in srgb, var(--cwd-header-text) 15%, transparent);
  }

  .cwd-header__menu a {
    flex: 1 1 auto;
    padding-block: 14px;
  }

  .cwd-header__submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cwd-header-text);
    font-size: 18px;
    cursor: pointer;
    transition: transform 150ms ease-in-out;
  }

  .cwd-header__submenu-toggle[aria-expanded="true"] {
    transform: rotate(180deg);
  }

  .cwd-header__submenu {
    display: none;
    flex-basis: 100%;
    padding: 0 0 8px 16px;
  }

  .cwd-header__menu .menu-item-has-children.is-open > .cwd-header__submenu {
    display: block;
  }

  .cwd-header__cta--panel {
    width: 100%;
    margin-top: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cwd-header *,
  .cwd-header__panel,
  /* Driven by the header, so it belongs to the same preference. */
  body #sticky-wrapper {
    transition: none !important;
  }
}

/* /assets/css/footer.css */
/* Editor utilities ("Additional CSS class(es)"): cwd-footer-tile icon chip,
   cwd-footer-row icon + text inline, cwd-footer-row--link link covers the row. */
.cwd-footer {
  --cwd-footer-bg: var(--ast-global-color-6);
  --cwd-footer-text: var(--ast-global-color-3);
  --cwd-footer-heading: var(--ast-global-color-2);
  --cwd-footer-line: var(--ast-global-color-4);
  --cwd-footer-accent: var(--ast-global-color-0);

  background-color: var(--cwd-footer-bg);
  color: var(--cwd-footer-text);
  font-size: 16px;
  line-height: 1.5;
}

.cwd-footer__inner {
  max-width: 1500px;
  margin-inline: auto;
  padding: 48px 32px 28px;
}

/* Reserve the height of the plugin's fixed contact bar so it cannot cover this row. */
body:has(#sticky-wrapper) .cwd-footer__inner {
  padding-bottom: 97px;
}

.cwd-footer__brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--cwd-footer-line);
}

.cwd-footer__logo {
  display: inline-flex;
}

/* An SVG carries a ratio but usually no intrinsic size, so an unstated height collapses it. */
.cwd-footer .cwd-footer__logo-img {
  display: block;
  width: auto;
  max-width: min(340px, 100%);
  height: var(--cwd-footer-logo-height, 80px);
  object-fit: contain;
}

.cwd-footer__logo-text {
  color: var(--cwd-footer-heading);
  font-size: 28px;
  font-weight: 700;
}

.cwd-footer__brand-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 16px 24px;
}

.cwd-footer__brand-side .cwd-footer__widget {
  display: flex;
  align-items: center;
}

.cwd-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 56px;
  padding-bottom: 40px;
}

@media (min-width: 577px) {
  .cwd-footer__cols--2,
  .cwd-footer__cols--3,
  .cwd-footer__cols--4,
  .cwd-footer__cols--5,
  .cwd-footer__cols--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 922px) {
  .cwd-footer__cols {
    gap: 48px 96px;
  }

  .cwd-footer__cols--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cwd-footer__cols--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cwd-footer__cols--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .cwd-footer__cols--6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.cwd-footer__col > .cwd-footer__widget + .cwd-footer__widget {
  margin-top: 24px;
}

.cwd-footer__widget > :first-child {
  margin-top: 0;
}

.cwd-footer__widget > :last-child {
  margin-bottom: 0;
}

.cwd-footer :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 14px;
  color: var(--cwd-footer-heading);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.cwd-footer :is(h1, h2, h3, h4, h5, h6):not(:first-child) {
  margin-top: 24px;
}

.cwd-footer p {
  margin: 0 0 8px;
}

/* Buttons keep the Button block's own colors. */
.cwd-footer a:not(.cwd-button) {
  color: var(--cwd-footer-text);
  text-decoration: none;
  transition: color 150ms ease-in-out;
}

.cwd-footer a:not(.cwd-button):hover {
  color: var(--cwd-footer-accent);
}

.cwd-footer ul,
.cwd-footer ol {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.4;
}

.cwd-footer li {
  margin: 0;
}

/* No underline on the social row: those links are icon chips. */
.cwd-footer li > a:hover:not(.cwd-socials__link) {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.cwd-footer img,
.cwd-footer iframe {
  max-width: 100%;
}

.cwd-footer figure {
  margin: 0 0 16px;
}

.cwd-footer hr,
.cwd-footer .wp-block-separator {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--cwd-footer-line);
}

.cwd-footer a:focus-visible {
  outline: 2px solid var(--cwd-footer-accent);
  outline-offset: 3px;
}

.cwd-footer .cwd-footer-tile {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background-color: var(--cwd-footer-accent);
  color: #fff;
  font-size: 16px;
  transition: background-color 150ms ease-in-out;
}

.cwd-footer .cwd-footer-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cwd-footer .cwd-footer-row :is(h1, h2, h3, h4, h5, h6),
.cwd-footer .cwd-footer-row p {
  margin: 0;
}

/* Icon blocks default to width:100%; keep them inline when rowed up. */
.cwd-footer .cwd-footer-row > .cwd-icon:not(.cwd-footer-tile) {
  width: auto;
}

.cwd-footer .cwd-footer-row--link {
  position: relative;
  border-radius: 8px;
}

.cwd-footer .cwd-footer-row--link a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.cwd-footer .cwd-footer-row--link:hover a:not(.cwd-button) {
  color: var(--cwd-footer-accent);
}

.cwd-footer .cwd-footer-row--link:hover .cwd-footer-tile {
  background-color: color-mix(in srgb, var(--cwd-footer-accent) 82%, #000);
}

.cwd-footer .cwd-footer-row--link:focus-within {
  outline: 2px solid var(--cwd-footer-accent);
  outline-offset: 4px;
}

.cwd-footer .cwd-footer-row--link a:focus-visible {
  outline: none;
}

.cwd-footer .cwd-business-hours--list {
  grid-template-columns: minmax(0, 1fr) auto;
}

.cwd-footer .cwd-business-hours--list .cwd-business-hours__day {
  color: var(--cwd-footer-text);
  font-weight: 400;
}

.cwd-footer .cwd-business-hours--list .cwd-business-hours__hours {
  color: var(--cwd-footer-heading);
  text-align: end;
}

.cwd-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--cwd-footer-line);
}

.cwd-footer__copyright {
  margin: 0;
  color: var(--cwd-footer-text);
  font-size: 14px;
}

.cwd-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 13px;
}

.cwd-footer__legal a {
  color: var(--cwd-footer-text);
  opacity: 0.75;
}

.cwd-footer__legal a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 921px) {
  .cwd-footer__brand {
    flex-direction: column;
    align-items: flex-start;
  }

  .cwd-footer__brand-side {
    justify-content: flex-start;
  }
}

@media (max-width: 576px) {
  .cwd-footer__inner {
    padding: 40px 20px 24px;
  }

  .cwd-footer__brand {
    padding-bottom: 24px;
  }

  .cwd-footer__brand-side {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
}

/* /assets/css/socials.css */
/* Social icons (markup in inc/social-links.php). Selectors name the element or
   block twice: the footer styles every `ul` it contains and has to be out-specified. */
ul.cwd-socials {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cwd-socials .cwd-socials__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cwd-socials .cwd-socials__link {
  /* Fixed integer box, no border: a fractional or border-grown box lands the
     glyph on a half pixel and the row shifts by one on hover or on a redraw. */
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 8px;
  background-color: color-mix(in srgb, currentColor 14%, transparent);
  /* Inherited, not the theme's link blue: the tint is mixed from it. */
  color: inherit;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color 150ms ease-in-out,
    color 150ms ease-in-out;
}

/* The glyph gets a box of its own, so a brand mark with odd metrics cannot shift the centre. */
.cwd-socials .cwd-socials__link > i {
  display: block;
  width: 1em;
  height: 1em;
  font-size: inherit;
  line-height: 1;
  text-align: center;
}

.cwd-socials .cwd-socials__link:hover {
  background-color: var(--cwd-socials-accent, var(--ast-global-color-0));
  color: #fff;
}

.cwd-socials--header .cwd-socials__link,
.cwd-socials--panel .cwd-socials__link {
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}

.cwd-socials--header .cwd-socials__link {
  width: 32px;
  height: 32px;
}

ul.cwd-socials--footer {
  margin-top: 20px;
}

/* The element is named in the selector to out-specify `.cwd-footer a:not(...)`,
   whose `:not()` argument counts towards its specificity. */
.cwd-socials--footer a.cwd-socials__link {
  color: var(--cwd-footer-text);
  /* The footer link rule also sets `transition`; the shorthand drops the background from it. */
  transition:
    background-color 150ms ease-in-out,
    color 150ms ease-in-out;
}

.cwd-socials--footer a.cwd-socials__link:hover {
  background-color: var(--cwd-footer-accent, var(--ast-global-color-0));
  color: #fff;
}

.cwd-header .cwd-socials {
  --cwd-socials-accent: var(--cwd-header-accent);
}