.elementor-351 .elementor-element.elementor-element-5af941c{--display:flex;--min-height:520px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;--padding-top:64px;--padding-bottom:64px;--padding-left:56px;--padding-right:56px;}.elementor-351 .elementor-element.elementor-element-5af941c:not(.elementor-motion-effects-element-type-background), .elementor-351 .elementor-element.elementor-element-5af941c > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(115deg, #2F1443 0%, #5A2480 100%);}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-351 .elementor-element.elementor-element-eb3d0c0 > .elementor-widget-container{margin:0px 0px 20px 0px;}.elementor-351 .elementor-element.elementor-element-eb3d0c0 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:0.16em;color:#C7A870;}.elementor-351 .elementor-element.elementor-element-7e16b0d > .elementor-widget-container{margin:0px 0px 22px 0px;}.elementor-351 .elementor-element.elementor-element-7e16b0d .elementor-heading-title{font-family:"Fraunces", Sans-serif;font-size:clamp(40px,6vw,72px);font-weight:300;line-height:1.05em;color:#FFFFFF;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-351 .elementor-element.elementor-element-d2895b8{font-family:"Fraunces", Sans-serif;font-size:19px;font-weight:300;font-style:italic;line-height:1.6em;color:rgba(255,255,255,0.78);}.elementor-351 .elementor-element.elementor-element-23a5646{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:64px;--padding-bottom:20px;--padding-left:24px;--padding-right:24px;}.elementor-351 .elementor-element.elementor-element-23a5646:not(.elementor-motion-effects-element-type-background), .elementor-351 .elementor-element.elementor-element-23a5646 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAF7F2;}.elementor-351 .elementor-element.elementor-element-c493bc6{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:50px;--padding-bottom:50px;--padding-left:25px;--padding-right:25px;}.elementor-351 .elementor-element.elementor-element-c493bc6:not(.elementor-motion-effects-element-type-background), .elementor-351 .elementor-element.elementor-element-c493bc6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FAF7F2;}.elementor-351 .elementor-element.elementor-element-e7ab663{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:#DCD2CC;--border-color:#DCD2CC;--border-radius:10px 10px 10px 10px;box-shadow:0px 18px 44px 0px rgba(47,20,67,0.08);--padding-top:36px;--padding-bottom:36px;--padding-left:32px;--padding-right:32px;}.elementor-351 .elementor-element.elementor-element-e7ab663:not(.elementor-motion-effects-element-type-background), .elementor-351 .elementor-element.elementor-element-e7ab663 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-351 .elementor-element.elementor-element-8edcdc9 > .elementor-widget-container{margin:0px 0px 20px 0px;}@media(max-width:767px){.elementor-351 .elementor-element.elementor-element-5af941c{--min-height:440px;--padding-top:48px;--padding-bottom:48px;--padding-left:24px;--padding-right:24px;}.elementor-351 .elementor-element.elementor-element-e7ab663{--padding-top:28px;--padding-bottom:28px;--padding-left:20px;--padding-right:20px;}}@media(min-width:768px){.elementor-351 .elementor-element.elementor-element-5af941c{--content-width:1600px;}.elementor-351 .elementor-element.elementor-element-23a5646{--content-width:1400px;}.elementor-351 .elementor-element.elementor-element-c493bc6{--content-width:640px;}}/* Start custom CSS for container, class: .elementor-element-5af941c */.elementor-351 .elementor-element.elementor-element-5af941c{ position:relative; overflow:hidden; }
.elementor-351 .elementor-element.elementor-element-5af941c::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  top:-40px; right:-60px; width:520px; height:420px;
  background-image:linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size:118px 96px; transform:rotate(-2deg);
  -webkit-mask-image:radial-gradient(ellipse at 70% 30%, #000 0%, transparent 72%);
          mask-image:radial-gradient(ellipse at 70% 30%, #000 0%, transparent 72%);
}
.elementor-351 .elementor-element.elementor-element-5af941c > .e-con-inner{ position:relative; z-index:1; }
@media(max-width:900px){ .elementor-351 .elementor-element.elementor-element-5af941c::after{ display:none; } }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-23a5646 *//* The 'Copied to clipboard' toast was sitting in the button row as a flex
   item. It is invisible until used, but it still took up width, which pushed
   the three buttons left of centre. Taking it out of flow lets the buttons
   centre properly; the toast now appears centred just below them. */
.elementor-351 .elementor-element.elementor-element-23a5646 .dt-summary-actions{ position:relative; }
.elementor-351 .elementor-element.elementor-element-23a5646 .dt-toast{ position:absolute; left:50%; top:100%; transform:translateX(-50%); margin:10px 0 0; white-space:nowrap; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-e7ab663 *//* Sending state for the lead form button. Applied only once the form is
   genuinely sending, never on a click. */
.elementor-351 .elementor-element.elementor-element-e7ab663 #contact-form .contact-submit-button.is-sending{
  background:#8C6B3A !important; border-color:#8C6B3A !important;
  opacity:.72 !important; cursor:default !important;
}/* End custom CSS */
/* Start custom CSS *//* ---------- Hero: ridgeline texture ---------- */
.elementor-element-5af941c{
  background-image:
    linear-gradient(100deg, rgba(47,20,67,.92) 0%, rgba(47,20,67,.62) 42%, rgba(47,20,67,.12) 100%),
    url('https://www.petershms.com/wp-content/uploads/2026/09/hero-ridgeline-plum.webp'),
    linear-gradient(115deg, #2F1443 0%, #5A2480 100%) !important;
  background-size: auto, cover, auto !important;
  background-position: center center, center bottom, center center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
}
@media(max-width:768px){
  .elementor-element-5af941c{
    background-image:
      linear-gradient(180deg, rgba(47,20,67,.92) 0%, rgba(47,20,67,.55) 100%),
      url('https://www.petershms.com/wp-content/uploads/2026/09/hero-ridgeline-plum.webp'),
      linear-gradient(115deg, #2F1443 0%, #5A2480 100%) !important;
  }
}

/* ---------- Design tool: no scroll animations ----------
   Each block started at opacity 0, shifted 28px down, and faded in when it
   entered the viewport. That is what made the tool look like it was sliding and
   re-drawing as the page moved. Everything is simply present now. */
.dc .reveal,
.dc .reveal.is-visible,
.dc .reveal.d1,
.dc .reveal.d2{
  opacity:1 !important; transform:none !important;
  transition:none !important; animation:none !important;
  transition-delay:0s !important;
}

/* ---------- Design tool: one toolbar line ----------
   The category pills sit inside the right-hand column, one row below the
   Exterior / Interior tabs. They are lifted out of the flow and pinned to the
   top right so they share the tabs' line. The wrapper's 56px side padding means
   right:0 would overhang the column, so the offset matches the padding, and
   10px top matches the tabs' own margin. The pills stay on one line, since a
   wrapped second row would sit on top of the board below. Narrow screens keep
   the original stacked order. */
.design-tool .wrap{ position:relative !important; }
@media(min-width:901px){
  .design-tool .dt-layout{ position:static !important; }
  .design-tool .dt-categories{
    position:absolute !important;
    top:10px !important; right:56px !important; left:auto !important;
    width:auto !important; max-width:calc(100% - 290px) !important; margin:0 !important;
    height:50px !important;
    display:flex !important; align-items:center !important;
    justify-content:flex-end !important;
    flex-wrap:nowrap !important; gap:8px !important;
    overflow-x:auto !important; overflow-y:hidden !important;
    scrollbar-width:none !important;
    z-index:3 !important;
  }
  .design-tool .dt-categories::-webkit-scrollbar{ display:none !important; }
  .design-tool .dt-cat-btn{
    flex:0 0 auto !important; white-space:nowrap !important;
    padding:8px 12px !important;
  }
  /* The board column was the narrower half of an even split; this gives it
     room for four tiles across instead of three. */
  .design-tool .dt-layout{
    grid-template-columns:minmax(0,1.32fr) minmax(0,1fr) !important;
  }
}

/* ---------- Design tool: the board ----------
   The board was clamped to the height of exactly one row with its own scrollbar
   inside it, so the interior set (seven pins) scrolled within a one-row window
   and the top of each tile was cut off as the page moved. It now sizes to its
   contents: four across and two rows for the interior set, while the three
   exterior pins stretch to fill the row instead of leaving a third of the card
   empty. */
.design-tool .dt-board{
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr)) !important;
  height:auto !important; max-height:none !important; min-height:0 !important;
  overflow:visible !important;
  gap:10px !important;
  align-content:start !important;
}
.design-tool .dt-pin{ height:auto !important; }
.design-tool .dt-pin-photo{ aspect-ratio:1 / 1 !important; height:auto !important; }

/* The Surprise Me and Reset buttons were plum text with a plum border sitting
   on the plum card, so they were invisible. */
.design-tool .dt-visual-foot .dt-btn{
  color:#F1EAE3 !important;
  border-color:rgba(241,234,227,.45) !important;
  background-color:transparent !important;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease !important;
}
.design-tool .dt-visual-foot .dt-btn:hover,
.design-tool .dt-visual-foot .dt-btn:focus-visible{
  color:#2F1443 !important;
  background-color:#C7A870 !important;
  border-color:#C7A870 !important;
}

/* ---------- Design tool: uniform swatch tiles ----------
   Every tile used to be a different height because the name was an inline span:
   a one-word name took one line, a two-word name took two, and the code beneath
   shifted with it. The grid was also shorter than a single tile, so every name
   was clipped mid-word. Each tile is now a column with a square image, a name
   slot two lines tall whether the name needs one line or two, then the code.
   Four even columns, and the whole set visible without an inner scrollbar. */
.design-tool .dt-swatch-grid{
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr)) !important;
  grid-auto-rows:min-content !important;
  align-content:start !important;
  height:auto !important; max-height:none !important; overflow:visible !important;
  gap:14px 10px !important;
}
.design-tool .dt-swatch{
  display:flex !important; flex-direction:column !important; align-items:stretch !important;
  height:auto !important; min-height:0 !important; text-align:center !important;
  position:relative !important;
}
.design-tool .dt-swatch-thumb{
  display:block !important; width:100% !important; height:auto !important;
  aspect-ratio:1 / 1 !important; overflow:hidden !important; border-radius:6px !important;
}
.design-tool .dt-swatch-thumb img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; display:block !important;
}
.design-tool .dt-swatch-name{
  display:block !important; width:100% !important;
  margin:7px 0 0 !important; padding:0 2px !important;
  font-size:11.5px !important; line-height:1.25 !important;
  min-height:2.5em !important;
  overflow-wrap:anywhere !important; hyphens:none !important;
}
.design-tool .dtx-swatch-sub{
  display:block !important; width:100% !important;
  margin:2px 0 0 !important;
  font-size:10px !important; line-height:1.2 !important; min-height:1.2em !important;
}
.design-tool .dtx-swatch-check{
  position:absolute !important; top:6px !important; right:6px !important;
  margin:0 !important; z-index:2 !important;
}


/* ---------- Full width tool ----------
   The tool was the narrowest thing on the page: Elementor capped the
   section at 1400px and the tool's own wrap capped it again at 1240px,
   so the working area was 1128px floating in the middle of a large
   screen while the hero above it ran to 1600px. Both caps are raised so
   the tool reads as the main event. The 56px wrap padding is kept
   because the category pills are positioned against it. */
.elementor-element-23a5646 > .e-con-inner{ max-width:1760px !important; }
@media(min-width:1200px){
  .design-tool .wrap{ max-width:1760px !important; }
}/* End custom CSS */