/* Sawyer Mason shared design system (base.css), merged 2026-10-04.
   Claude Code for Jay: one copy of the rules that were spread over ten WPCode CSS snippets
   (Share Photos 50876, Dealer 50871, Warranty 50866, Advantages 50862, Sustainable 50857, Gallery 50836,
   FAQ 50834, Contact 50821, About 50813, Home 50805). Code consolidation, no visual change.
   The sections are in the order WPCode printed them, because where two rules tie the later one wins;
   exact duplicate rules were removed (the last copy is kept). Do not reorder sections without checking the pages.
   Loaded site-wide, as the snippets were. Home-only rules are in pages/home.css. */
/* Open Sans: from the theme's own files since 2026-10-23 (inc/speed.php, Claude Code for Jay, u13); the @import of Google Fonts that stood here held up the first paint. */

/* ---------- from WPCode 50876 "Share Your Photos 2026 - CSS": 4 rules not repeated further down ---------- */
.sm-share-intro .sm-h1{font-size:clamp(40px,4.6vw,66px);line-height:1.05}
.sm-share-intro .sm-lead{margin-bottom:26px}
.sm-sec .sm-share-terms span{font-size:15px;color:#3d4652}
.sm-share-terms li:last-child{border-bottom:1px solid #e6dfd4}

/* ---------- from WPCode 50871 "Dealer Program 2026 - CSS": 19 rules not repeated further down ---------- */
.sm-sec.sm-dealer-hero .sm-h1{color:#fff}
.sm-sec.sm-dealer-hero .sm-h1 em{color:#d9bd8c}
.sm-sec.sm-dealer-hero .sm-lead{color:#cfd6de}
.sm-sec.sm-dealer-hero a.button:not(.is-outline){background:#f4efe8!important;border-color:#f4efe8!important;color:#1b3553!important}
.sm-sec.sm-dealer-hero a.button:not(.is-outline):hover{background:#fff!important;border-color:#fff!important}
.sm-sec.sm-dealer-hero a.button.is-outline{background:transparent!important;border-color:rgba(244,239,232,.55)!important;color:#f4efe8!important}
.sm-sec.sm-dealer-hero a.button.is-outline:hover{border-color:#f4efe8!important;background:transparent!important}
.sm-dealer-program .col{padding-bottom:0!important}
@media (min-width:850px){
  .sm-dealer-program .col+.sm-dealer-list-col{margin-left:8.333%}
}
.sm-dealer-list-col .sm-steps{margin-top:4px}
.sm-dealer-list-col .sm-steps li:last-child{border-bottom:1px solid #e6dfd4}
.sm-sec .sm-display-desc{margin:8px 0 0;font-size:15px;font-weight:300;line-height:1.65;color:#3d4652}
.sm-dealer-displays .sm-proj-title a::after{content:none}
.sm-dealer-note>.col-inner{padding-top:8px;border-top:1px solid #e6dfd4}
.sm-dealer-note p{margin:20px 0 0;font-size:15px;font-weight:300;line-height:1.7}
.sm-dealer-note .sm-link{margin-left:10px}
@media (max-width:849px){
  .sm-dealer-program .col+.col>.col-inner{padding-top:40px}
}
@media (max-width:549px){
  .sm-dealer-displays .sm-proj{padding-bottom:28px!important}
  .sm-dealer-note .sm-link{margin:10px 0 0}
}

/* ---------- from WPCode 50866 "Register your Warranty 2026 (Draft) - CSS": 6 rules not repeated further down ---------- */
.sm-reg .sm-h1{font-size:clamp(38px,4vw,58px);line-height:1.08}
.sm-reg .sm-steps{margin-top:8px}
.sm-sec .sm-reg-links{margin:22px 0 0}
.sm-form-missing{padding:24px;border:1px dashed #d9bd8c;background:#faf8f4}
.sm-form-missing p{margin:0;font-size:14px;line-height:1.6;color:#3d4652}
@media (max-width:849px){
  .sm-reg .sm-form-card{margin-top:24px}
}

/* ---------- from WPCode 50862 "Structured Flooring Advantages 2026 - CSS": 22 rules not repeated further down ---------- */
.sm-adv-intro{border-bottom:1px solid #e6dfd4}
.sm-adv-intro .col{padding-bottom:0!important}
.sm-adv-intro .sm-h1{font-size:clamp(40px,4.6vw,68px);line-height:1.05}
.sm-adv-intro .sm-lead{margin-bottom:22px}
.sm-adv-diagram .img{margin:0!important}
.sm-adv-diagram .img img{mix-blend-mode:multiply}
.sm-adv .col{padding-bottom:0!important}
.sm-adv-img .img{margin:0!important}
.sm-adv-text p{font-size:17px;font-weight:300;line-height:1.75}
.sm-adv-text .sm-h2{margin-bottom:22px}
.sm-sec .sm-adv-links{display:flex;flex-wrap:wrap;gap:14px 28px;margin:26px 0 0}
@media (min-width:850px){
  .sm-adv-row .sm-adv-text>.col-inner{padding-left:56px}
  .sm-adv-flip .sm-adv-text>.col-inner{padding-left:0;padding-right:56px}
  .sm-adv-flip .sm-adv-img{margin-left:8.333%}
}
@media (max-width:849px){
  .sm-adv-intro .sm-adv-diagram>.col-inner{padding-top:32px}
  .sm-adv-flip .sm-adv-img{order:-1}
  .sm-adv-text>.col-inner{padding-top:32px}
}
@media (max-width:549px){
  .sm-adv-text p{font-size:16px}
  .sm-adv-text>.col-inner{padding-top:24px}
  .sm-sec .sm-adv-links{flex-direction:column;align-items:flex-start;gap:14px}
}
.sm-adv-cutout .img-inner{background:transparent!important}
.sm-adv-cutout .img-inner img{mix-blend-mode:multiply;object-fit:contain!important}

/* ---------- from WPCode 50857 "Sustainable + Green - CSS": 44 rules not repeated further down ---------- */
.sm-eco-intro{border-bottom:1px solid #e6dfd4}
.sm-eco-intro.section{padding-bottom:72px!important}
.sm-eco-intro .sm-h1{margin:0;font-size:clamp(44px,5.4vw,80px);line-height:1.04}
.sm-eco-intro .col{padding-bottom:0!important}
.sm-eco-intro-side .sm-lead{margin:0 0 20px;font-size:19px}
@media (min-width:850px){
  .sm-eco-intro-side{margin-left:8.333%}
}
.sm-sec .sm-eco-statement{margin:0;font-size:clamp(28px,2.8vw,40px);font-weight:300;line-height:1.25;color:#1b3553}
.sm-sec .sm-eco-statement em{font-style:italic;color:#8a6a35}
.sm-eco-approach .col{padding-bottom:0!important}
.sm-eco-head{padding-bottom:48px!important}
.sm-eco-layer{margin:0!important}
.sm-eco-layer>.col{padding-bottom:0!important}
.sm-eco-layer+.sm-eco-layer{margin-top:72px!important}
@media (min-width:850px){
  .sm-eco-layer .sm-eco-layer-text>.col-inner{padding-left:48px}
  .sm-eco-flip .sm-eco-layer-text>.col-inner{padding-left:0;padding-right:48px}
  .sm-eco-flip .sm-eco-diagram{margin-left:8.333%}
}
.sm-sec .sm-layer-label{margin:0 0 14px;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#1b3553}
.sm-eco-layer-text p{font-size:16px;font-weight:300;line-height:1.75}
.sm-eco-layer-text p:last-child{margin-bottom:0}
.sm-sec .sm-pull{margin:24px 0 0;font-size:clamp(22px,2vw,28px)!important;font-weight:300!important;font-style:italic;line-height:1.35!important;color:#8a6a35}
.sm-eco-diagram .img{margin:0!important}
.sm-eco-diagram .img img{mix-blend-mode:multiply}
.sm-eco-health .sm-h2{color:#fff;margin-bottom:40px}
.sm-eco-health .sm-h2 em{color:#d9bd8c}
.sm-eco-health .col{padding-bottom:0!important}
.sm-eco-point>.col-inner{padding-top:28px;border-top:1px solid rgba(244,239,232,.22)}
.sm-sec .sm-eco-point h3{margin:0 0 12px;font-size:22px;font-weight:400;line-height:1.3;color:#fff}
.sm-sec .sm-eco-point p{font-size:16px;font-weight:300;line-height:1.75;color:#cfd6de}
.sm-sec a.sm-link.sm-link-light{color:#f4efe8}
.sm-sec a.sm-link.sm-link-light:hover{color:#d9bd8c}
.sm-eco-close .col{padding-bottom:0!important}
.sm-eco-close .sm-lead{margin-bottom:0}
@media (max-width:849px){
  .sm-eco-intro-side>.col-inner{padding-top:28px}
  .sm-eco-approach .col+.col>.col-inner{padding-top:28px}
  .sm-eco-flip .sm-eco-diagram{order:-1}
  .sm-eco-layer-text>.col-inner{padding-top:28px}
  .sm-eco-point+.sm-eco-point>.col-inner{margin-top:32px}
  .sm-eco-close .sm-cta-buttons>.col-inner{margin-top:28px}
}
@media (max-width:549px){
  .sm-eco-intro.section{padding-bottom:40px!important}
  .sm-eco-head{padding-bottom:28px!important}
  .sm-eco-layer+.sm-eco-layer{margin-top:48px!important}
  .sm-eco-health .sm-h2{margin-bottom:28px}
}
.sm-sec.sm-eco-health .sm-h2{color:#fff!important}
.sm-sec.sm-eco-health .sm-h2 em{color:#d9bd8c!important}

/* ---------- from WPCode 50821 "SM Contact Us 2026 - CSS": 204 rules not repeated further down ---------- */
.sm-sec .sm-eyebrow,.sm-footer .sm-eyebrow{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#8a6a35;margin:0 0 12px}
.sm-sec .sm-eyebrow--brass,.sm-footer .sm-eyebrow--brass{color:#d9bd8c}
.sm-sec .sm-h1{font-size:clamp(38px,4.2vw,60px);font-weight:300;line-height:1.08;color:#1b3553;letter-spacing:-.01em;margin:0 0 22px}
.sm-sec .sm-h1 em,.sm-sec .sm-h2 em{font-style:italic;color:#8a6a35}
.sm-sec .sm-h2{font-size:clamp(28px,2.9vw,40px);font-weight:300;line-height:1.15;color:#1b3553;margin:0 0 20px}
.sm-sec .sm-lead{font-size:17px;font-weight:300;line-height:1.65;color:#3d4652;max-width:480px;margin-bottom:26px}
.sm-sec p{color:#3d4652}
.sm-sec a.sm-link{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#1b3553;border-bottom:1px solid currentColor;padding-bottom:4px}
.sm-sec a.sm-link:hover{color:#8a6a35}
.sm-sec a.button{box-sizing:border-box;max-width:100%;font-family:'Open Sans',sans-serif;border-radius:0!important;font-size:12px;font-weight:500;letter-spacing:.18em;min-height:52px;line-height:50px;padding:0 26px;box-shadow:none!important;width:auto}
.sm-sec a.button:not(.is-outline){background:#1b3553!important;border:1px solid #1b3553!important;color:#f4efe8!important}
.sm-sec a.button.is-outline{background:transparent!important;border:1px solid #1b3553!important;color:#1b3553!important}
.sm-sec a.button.is-outline:hover{background:#1b3553!important;color:#f4efe8!important}
.sm-sec .sm-viz a.button{background:#f4efe8!important;border-color:#f4efe8!important;color:#1b3553!important}
.sm-sec a.button.sm-btn-solid{background:#1b3553;border:1px solid #1b3553;color:#f4efe8}
.sm-sec a.button.sm-btn-line{background:transparent;border:1px solid #1b3553;color:#1b3553}
.sm-sec a.button.sm-btn-line:hover{background:#1b3553;color:#f4efe8}
.sm-sec a.button.sm-btn-cream{background:#f4efe8;border:1px solid #f4efe8;color:#1b3553}
.sm-sec .section-title-main{flex:1 1 auto;min-width:0}
.sm-sec .section-title-main{font-family:'Open Sans',sans-serif;font-size:clamp(28px,2.9vw,40px);font-weight:300;line-height:1.15;color:#1b3553;text-transform:none;letter-spacing:0;padding:0;border:0;margin:0}
.sm-sec .section-title a{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#1b3553;border-bottom:1px solid currentColor;padding-bottom:4px;margin-left:auto;white-space:nowrap}
.sm-press .sm-eyebrow{color:#5b6470;margin:0}
.sm-press .sm-press-name{font-size:20px;font-weight:300;color:#3d4652;margin:0;white-space:nowrap}
.sm-sec .sm-col-name a{color:#1b3553}
.sm-why h3{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#1b3553;margin:10px 0 8px}
.sm-why .sm-viz>.col-inner{background:#1b3553;padding:32px}
.sm-why .sm-viz h2{font-size:28px;font-weight:300;line-height:1.15;color:#f4efe8;margin:0 0 12px}
.sm-rule{display:inline-block;width:40px;height:1px;background:#d9bd8c;vertical-align:middle;margin-right:14px}
.sm-footer{background:#1b3553;color:#f4efe8;padding:88px max(64px,5vw) 40px;display:flex;flex-direction:column;gap:56px}
.sm-footer a:hover{color:#d9bd8c}
.sm-hero-scroll:hover .sm-hero-scroll-arrow{background:#1b3553}
@media (max-width:549px){
  .sm-sec .section-title-main{flex:0 0 auto}
}
.sm-about-copy p{font-size:17px;font-weight:300;line-height:1.75;color:#3d4652;margin:0 0 18px}
.sm-sec .sm-about-copy .sm-lead{font-size:22px;line-height:1.55;color:#1b3553;max-width:none;margin-bottom:24px}
.sm-cards .sm-card>.col-inner{height:100%;padding:44px 36px 40px;background:#fff;border-top:0!important}
.sm-sec .sm-card-num{margin:0 0 28px;font-size:13px;font-weight:600;letter-spacing:.2em;color:#8a6a35}
.sm-sec .sm-card h3{margin:0 0 14px;font-size:22px;font-weight:400;line-height:1.25;color:#1b3553}
.sm-specs li{margin:0;padding:18px 0;border-top:1px solid #e6dfd4;display:flex;flex-direction:column;gap:4px}
.sm-specs strong{font-size:24px;font-weight:300;line-height:1.2;color:#1b3553}
.sm-specs span{font-size:13px;letter-spacing:.04em;color:#5b6470}
.sm-sec.sm-cta .sm-h2{color:#f4efe8;margin-bottom:12px}
.sm-sec.sm-cta a.button:not(.is-outline){background:#f4efe8!important;border-color:#f4efe8!important;color:#1b3553!important}
.sm-sec.sm-cta a.button.is-outline{background:transparent!important;border-color:rgba(244,239,232,.5)!important;color:#f4efe8!important}
.sm-sec.sm-cta a.button.is-outline:hover{border-color:#f4efe8!important;background:transparent!important}
.sm-hero--short .sm-hero-media .img-inner{min-height:340px}
.sm-hero--short .sm-hero-text>.col-inner{padding-top:48px;padding-bottom:48px}
.sm-hero--short .sm-h1{font-size:clamp(34px,3.4vw,50px)}
#sm-contact-form{scroll-margin-top:120px}
.sm-ways .sm-card-num{text-transform:uppercase}
.sm-ways .sm-card p:last-child{margin-top:18px}
@media (min-width:850px){
  .sm-contact-intro>.col-inner{padding-right:48px}
}
.sm-steps{list-style:none;counter-reset:smstep;margin:12px 0 0;padding:0}
.sm-steps li{counter-increment:smstep;position:relative;margin:0;padding:18px 0 18px 56px;border-top:1px solid #e6dfd4;display:flex;flex-direction:column;gap:4px}
.sm-steps li::before{content:counter(smstep,decimal);position:absolute;left:0;top:18px;font-size:13px;font-weight:600;letter-spacing:.2em;color:#8a6a35}
.sm-steps strong{font-size:18px;font-weight:400;color:#1b3553}
.sm-steps span{font-size:14px;font-weight:300;line-height:1.55;color:#3d4652}
.sm-form-card>.col-inner{background:#fff;padding:48px 48px 40px;border-top:0!important}
.sm-sec .sm-form-title{margin:0 0 24px;font-size:28px;font-weight:300;line-height:1.2;color:#1b3553}
.sm-hubspot-form{font-family:'Open Sans',sans-serif}
.sm-hubspot-form .sm-form-loading{font-size:14px;color:#5b6470}
.sm-hubspot-form fieldset{max-width:none!important}
.sm-hubspot-form .hs-form-field{margin-bottom:20px}
.sm-hubspot-form label,.sm-hubspot-form .hs-form-field>label{display:block;margin:0 0 8px;font-family:'Open Sans',sans-serif!important;font-size:11px!important;font-weight:600!important;letter-spacing:.16em;text-transform:uppercase;color:#1b3553!important}
.sm-hubspot-form .hs-form-required{color:#8a6a35!important;margin-left:2px}
.sm-hubspot-form input[type=text],.sm-hubspot-form input[type=email],.sm-hubspot-form input[type=tel],.sm-hubspot-form input[type=number],.sm-hubspot-form .hs-input:not(input):not(textarea),.sm-hubspot-form textarea{width:100%!important;min-height:48px;box-sizing:border-box;padding:12px 14px!important;font-family:'Open Sans',sans-serif!important;font-size:16px!important;color:#1a2330!important;background:#faf8f4!important;border:1px solid #e6dfd4!important;border-radius:0!important;box-shadow:none!important;transition:border-color .2s,background .2s}
.sm-hubspot-form textarea{min-height:140px}
.sm-hubspot-form input:focus,.sm-hubspot-form .hs-input:not(input):not(textarea):focus,.sm-hubspot-form textarea:focus{outline:none;border-color:#1b3553!important;background:#fff!important}
.sm-hubspot-form .hs-error-msgs{list-style:none;margin:6px 0 0;padding:0}
.sm-hubspot-form .hs-error-msgs label{font-size:12px!important;letter-spacing:0;text-transform:none;font-weight:400!important;color:#a3342a!important}
.sm-hubspot-form .hs-richtext,.sm-hubspot-form .legal-consent-container{font-size:13px;color:#5b6470}
.sm-hubspot-form .hs-submit{margin-top:8px}
.sm-hubspot-form .sm-contact-button,.sm-hubspot-form input[type=submit]{appearance:none;min-height:52px;padding:0 34px!important;font-family:'Open Sans',sans-serif!important;font-size:12px!important;font-weight:500!important;letter-spacing:.18em!important;text-transform:uppercase;color:#f4efe8!important;background:#1b3553!important;border:1px solid #1b3553!important;border-radius:0!important;box-shadow:none!important;cursor:pointer;transition:background .2s}
.sm-hubspot-form .sm-contact-button:hover,.sm-hubspot-form input[type=submit]:hover{background:#12263d!important}
.sm-hubspot-form .submitted-message{font-size:18px;font-weight:300;color:#1b3553}
.sm-hubspot-form,.sm-hubspot-form *,.sm-hubspot-form *::before,.sm-hubspot-form *::after{box-sizing:border-box!important}
.sm-hubspot-form .hs-form,.sm-hubspot-form form{width:100%;max-width:100%!important;margin:0!important}
.sm-hubspot-form .hs_submit,.sm-hubspot-form .hs-submit,.sm-hubspot-form .actions{margin:8px 0 0!important;padding:0!important;width:100%}
.sm-hubspot-form .hs-form fieldset{max-width:none!important;width:100%!important;margin:0!important;padding:0!important;border:0}
.sm-hubspot-form .hs-form fieldset.form-columns-2{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
.sm-hubspot-form .hs-form fieldset.form-columns-3{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px}
.sm-hubspot-form .hs-form fieldset .hs-form-field{width:100%!important;float:none!important;padding:0!important;margin-bottom:22px}
.sm-hubspot-form .hs-form fieldset .input{margin:0!important;padding:0!important}
.sm-hubspot-form .hs-form .hs-input:not([type=checkbox]):not([type=radio]),.sm-hubspot-form .hs-form .hs-input:not(input):not(textarea),.sm-hubspot-form .hs-form textarea{display:block;width:100%!important;max-width:none!important;box-sizing:border-box!important;margin:0!important}
.sm-hubspot-form .hs-form input.hs-input:not([type=checkbox]):not([type=radio]):not([type=submit]),.sm-hubspot-form .hs-form .hs-input:not(input):not(textarea),.sm-hubspot-form .hs-form .hs-input:not(input):not(textarea){height:52px!important;min-height:52px;padding:0 16px!important;font-size:16px!important;line-height:1.2!important;color:#1a2330!important}
.sm-hubspot-form .hs-form .hs-input:not(input):not(textarea){appearance:none;-webkit-appearance:none;padding-right:44px!important;background-image:linear-gradient(45deg,transparent 50%,#1b3553 50%),linear-gradient(135deg,#1b3553 50%,transparent 50%)!important;background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%!important;background-size:6px 6px,6px 6px!important;background-repeat:no-repeat!important}
.sm-hubspot-form .hs-form textarea{height:auto!important;min-height:160px;padding:14px 16px!important;resize:vertical}
.sm-hubspot-form .hs-error-msgs,.sm-hubspot-form .hs-error-msgs li{margin:6px 0 0!important;padding:0!important;list-style:none!important}
.sm-form-card .hs-form>.hs-richtext:first-child,.sm-form-card .hs-form fieldset:first-child .hs-richtext{display:none}
.sm-dealer-box{margin-bottom:24px}
.sm-dealer-box .sm-h2{font-size:30px}
.sm-help-item>.col-inner{border-top:1px solid #e6dfd4;padding-top:22px}
.sm-sec .sm-help-item h3{margin:0 0 8px;font-size:18px;font-weight:400;line-height:1.3}
.sm-sec .sm-help-item h3 a{color:#1b3553}
.sm-sec .sm-help-item h3 a:hover{color:#8a6a35}
.sm-sec .sm-help-item p{margin:0;font-size:14px;font-weight:300;line-height:1.6}
@media (max-width:849px){
  .sm-hero--short .sm-hero-media .img-inner{min-height:0;aspect-ratio:16/8}
  .sm-form-card>.col-inner{padding:36px 28px 32px}
}
@media (max-width:549px){
  .sm-hero--short .sm-hero-media .img-inner{aspect-ratio:16/9}
  .sm-form-card>.col-inner{padding:28px 20px 24px}
  .sm-hubspot-form .hs-form fieldset.form-columns-2,.sm-hubspot-form .hs-form fieldset.form-columns-3{grid-template-columns:1fr}
  .sm-hubspot-form .hs-form fieldset.form-columns-2 .input{margin-right:0!important}
  .sm-hubspot-form .sm-contact-button,.sm-hubspot-form input[type=submit]{display:block;width:100%!important;max-width:100%!important;margin:0!important;text-align:center}
  .sm-steps li{padding-left:44px}
}
.sm-sec .section-title-main{flex:1 1 auto!important;min-width:0}
@media (max-width:849px){
  .sm-sec .section-title{flex-direction:column!important;align-items:flex-start!important;gap:14px!important}
  .sm-sec .section-title-main{flex:0 0 auto!important}
  .sm-sec .section-title a{margin-left:0!important}
}
.sm-faq-anchor{scroll-margin-top:120px}
.sm-stats .col{padding-bottom:0}
.sm-stats .col-inner{border-left:1px solid rgba(244,239,232,.2);padding-left:24px}
.sm-sec .sm-stat-num{white-space:nowrap;margin:0 0 6px;font-size:clamp(28px,3vw,40px);font-weight:300;line-height:1.1;color:#fff}
.sm-sec .sm-stat-label{margin:0;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#d9bd8c}
.sm-faq-topics.section{padding-bottom:16px!important}
.sm-sec .sm-jump{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.sm-sec .sm-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 22px;border:1px solid #e6dfd4;border-radius:999px;background:#fff;font-size:14px;color:#1b3553;text-decoration:none;transition:border-color .2s,background .2s}
.sm-sec .sm-jump a:hover{border-color:#1b3553;background:#f4efe8;color:#1b3553}
@media (min-width:850px){
  .sm-faq-head>.col-inner{position:sticky;top:120px}
}
.sm-faq .sm-h2{font-size:clamp(26px,2.4vw,34px)}
.sm-faq .accordion{border-bottom:1px solid #e6dfd4}
.sm-faq .accordion-item{border:0}
.sm-faq .accordion-title{display:block;position:relative;margin:0;padding:24px 56px 24px 0!important;border:0!important;border-top:1px solid #e6dfd4!important;background:none!important;font-family:'Open Sans',sans-serif;font-size:18px!important;font-weight:400!important;line-height:1.4;color:#1b3553!important;text-transform:none;letter-spacing:normal}
.sm-faq .accordion-title:hover{color:#8a6a35!important}
.sm-faq .accordion-title.active{color:#1b3553!important;font-weight:500!important}
.sm-faq .accordion-title .toggle{position:absolute!important;left:auto!important;right:0!important;top:50%!important;transform:translateY(-50%);width:36px!important;height:36px!important;margin:0!important;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid #e6dfd4;border-radius:50%;background:#fff;color:#1b3553;opacity:1!important}
.sm-faq .accordion-title .toggle i{font-size:14px;transition:transform .25s}
.sm-faq .accordion-title.active .toggle{background:#1b3553;border-color:#1b3553;color:#fff}
.sm-faq .accordion-title.active .toggle i{transform:rotate(180deg)}
.sm-faq .accordion-inner{padding:0 56px 28px 0!important}
.sm-faq .accordion-inner p,.sm-faq .accordion-inner li{font-size:16px;font-weight:300;line-height:1.75;color:#3d4652;margin:0 0 14px}
.sm-faq .accordion-inner strong{font-weight:600;color:#1b3553}
.sm-faq .accordion-inner a{display:inline-flex;margin-right:24px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#1b3553;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.sm-faq .accordion-inner a:hover{color:#8a6a35}
.sm-tools{list-style:none;margin:10px 0 18px!important;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 20px}
.sm-sec .sm-tools li{position:relative;margin:0!important;padding-left:16px;font-size:15px}
.sm-tools li::before{content:'';position:absolute;left:0;top:.75em;width:6px;height:6px;border-radius:50%;background:#d9bd8c}
@media (max-width:849px){
  .sm-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm-faq-head>.col-inner{padding-bottom:4px}
}
@media (max-width:549px){
  .sm-stats .col{padding-bottom:24px}
  .sm-stats .col-inner{padding-left:16px}
  .sm-sec .sm-jump a{min-height:40px;padding:0 16px;font-size:13px}
  .sm-faq .accordion-title{padding:20px 48px 20px 0!important;font-size:16px!important}
  .sm-faq .accordion-inner{padding:0 0 24px!important}
  .sm-faq .accordion-inner a{margin:0 18px 10px 0}
}
.sm-faq .accordion-title .toggle{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;aspect-ratio:1/1;padding:0!important;line-height:1!important;box-sizing:border-box!important;flex:none!important;border-radius:50%!important}
.sm-gal-hero.section{padding-bottom:0!important}
.sm-gal-intro>.col-inner{text-align:center}
.sm-gal-intro .sm-h1{font-size:clamp(40px,5vw,72px)}
.sm-gal-intro .sm-lead{max-width:620px;margin-left:auto;margin-right:auto}
.sm-gal-intro .sm-jump{justify-content:center;margin-top:8px}
.sm-collage{margin-top:40px!important}
.sm-collage .col{padding-bottom:0!important}
.sm-collage .img{width:100%!important;margin:0!important}
.sm-collage .img-inner{padding-top:0!important;overflow:hidden}
.sm-collage .img-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.sm-collage .img:hover img{transform:scale(1.03)}
.sm-collage-big .img-inner{height:600px}
.sm-collage-side .img-inner{height:272px}
.sm-sec .sm-collage-cap{margin:10px 0 18px;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#5b6470}
.sm-projects .sm-proj{padding-bottom:40px}
.sm-projects .img{margin:0!important;overflow:hidden}
.sm-projects .img img{transition:transform .6s}
.sm-projects .img:hover img{transform:scale(1.04)}
.sm-sec .sm-proj-floor{margin:16px 0 6px;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#8a6a35}
.sm-sec .sm-proj-title{margin:0;font-size:20px;font-weight:400;line-height:1.3}
.sm-sec .sm-proj-title a{color:#1b3553;text-decoration:none}
/* the arrow after a project title shows on hover only. Since 2026-10-12 the arrow itself (the site's arrow mark, or the text arrow) is drawn by inc/arrow.php; this rule only keeps it hidden until hover. */
.sm-sec .sm-proj-title a::after{opacity:0;transition:opacity .2s}
.sm-sec .sm-proj-title a:hover{color:#8a6a35}
.sm-sec .sm-proj-title a:hover::after{opacity:1}
@media (max-width:849px){
  .sm-collage-big .img-inner{height:420px}
  .sm-collage-side .img-inner{height:260px}
  .sm-sec .sm-proj-title{font-size:18px}
}
@media (max-width:549px){
  .sm-collage-big .img-inner{height:300px}
  .sm-collage-side .img-inner{height:220px}
  .sm-gal-intro .sm-jump{justify-content:flex-start}
  .sm-gal-intro>.col-inner{text-align:left}
  .sm-projects .sm-proj{padding-bottom:28px}
}
.sm-sec>.section-content>.row.sm-collage{padding-left:calc(max(64px,5vw) - 5px)!important;padding-right:calc(max(64px,5vw) - 5px)!important}
@media (max-width:849px){
  .sm-sec>.section-content>.row.sm-collage{padding-left:35px!important;padding-right:35px!important}
}
@media (max-width:549px){
  .sm-sec>.section-content>.row.sm-collage{padding-left:15px!important;padding-right:15px!important}
  .sm-sec.sm-projects>.section-content>.row:not(.row-collapse){padding-left:14px!important;padding-right:14px!important}
  .sm-projects .row>.col{padding-left:6px!important;padding-right:6px!important}
  .sm-projects .sm-proj{padding-bottom:22px!important}
  .sm-sec .sm-proj-floor{margin:10px 0 4px;font-size:10px;letter-spacing:.12em}
  .sm-sec .sm-proj-title{font-size:15px;line-height:1.3}
}
.sm-steps li::before{content:none!important;display:none!important}
.sm-steps li{padding-left:0!important}

/* ---------- from WPCode 50813 "About 2026 - CSS": 68 rules not repeated further down ---------- */
.sm-sec .sm-viz a.button{background:var(--sm-cream)!important;border-color:var(--sm-cream)!important;color:var(--sm-navy)!important}
.sm-sec .sm-viz a.button:hover{background:#fff!important;border-color:#fff!important}
.sm-press .col{padding-bottom:0}
.sm-press .col-inner{display:flex;align-items:center;justify-content:center;min-height:64px}
.sm-press .sm-eyebrow{color:var(--sm-muted);margin:0}
.sm-press .img{width:auto!important}
.sm-press .img img{max-height:44px;width:auto;max-width:160px;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1);opacity:.85}
.sm-press .sm-press-name{font-size:20px;font-weight:300;color:var(--sm-body);margin:0;white-space:nowrap}
.sm-featured .product-small,.sm-featured .product-small .box,.sm-featured .product-small .box-text,.sm-featured .product-small>.col-inner{background:transparent!important;box-shadow:none!important}
.sm-featured .product-small .box-text{padding:14px 0 0}
.sm-why .sm-viz-row{position:absolute!important;right:40px;bottom:40px;left:auto!important;width:360px!important;max-width:calc(100% - 80px);margin:0!important}
.sm-why .sm-viz{padding:0!important}
.sm-why .sm-viz>.col-inner{background:var(--sm-navy);padding:32px}
.sm-why .sm-viz h2{font-size:28px;font-weight:300;line-height:1.15;color:var(--sm-cream);margin:0 0 12px}
.sm-why .sm-viz p{font-size:14px;font-weight:300;line-height:1.55;color:#cfd6de}
.sm-why .sm-viz .button{margin:6px 0 0}
.sm-gallery.section{padding-bottom:0!important}
.sm-gallery .sm-gallery-row{margin-top:8px}
.sm-gallery .sm-gallery-row>.col{flex:1 1 20%;max-width:20%;padding:0 2px}
.sm-gallery .sm-gallery-row .img-inner{padding-top:0!important;height:280px}
.sm-gallery .sm-gallery-row .img-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html:has(.sm-sec){scroll-behavior:smooth}
@media (max-width:849px){
  .sm-why .sm-viz-row{position:static!important;width:auto!important;max-width:none}
  .sm-why .sm-viz>.col-inner{padding:40px}
  .sm-gallery .sm-gallery-row{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .sm-gallery .sm-gallery-row::-webkit-scrollbar{display:none}
  .sm-gallery .sm-gallery-row>.col{flex:0 0 42%;max-width:42%;scroll-snap-align:start}
  .sm-gallery .sm-gallery-row .img-inner{height:240px}
}
@media (max-width:549px){
  .sm-press .img img{max-height:32px;max-width:120px}
  .sm-press .sm-press-name{font-size:17px}
  .sm-why .sm-viz>.col-inner{padding:32px 20px}
  .sm-gallery .sm-gallery-row>.col{flex:0 0 78%;max-width:78%}
}
#sm-about-story{scroll-margin-top:120px}
.sm-about-copy p{font-size:17px;font-weight:300;line-height:1.75;color:var(--sm-body);margin:0 0 18px}
.sm-sec .sm-about-copy .sm-lead{font-size:22px;line-height:1.55;color:var(--sm-navy);max-width:none;margin-bottom:24px}
.sm-quote .col-inner{text-align:center}
.sm-sec .sm-quote-text,.sm-sec p.sm-quote-text,.sm-sec .sm-quote-text p,.sm-sec blockquote.sm-quote-text{border:0!important;margin:18px auto 40px!important;padding:0!important;max-width:940px;background:none;font-family:'Open Sans',sans-serif!important;font-size:clamp(26px,3.3vw,46px)!important;font-weight:300!important;font-style:normal!important;line-height:1.3!important;letter-spacing:normal;text-transform:none;color:#fff!important}
.sm-sec .sm-quote-text p{margin:0!important}
.sm-quote .sm-quote-logo{margin:0 auto!important;width:220px!important;max-width:60%!important}
.sm-quote .sm-quote-logo img{filter:brightness(0) invert(1);opacity:.85}
.sm-sec .sm-quote-name{margin:14px 0 0;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#aab6c4}
.sm-cards .sm-card>.col-inner{height:100%;padding:44px 36px 40px;background:#fff;border-top:2px solid var(--sm-brass)}
.sm-sec .sm-card-num{margin:0 0 28px;font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--sm-brass-dk)}
.sm-sec .sm-card h3{margin:0 0 14px;font-size:22px;font-weight:400;line-height:1.25;color:var(--sm-navy)}
.sm-sec .sm-card p:not(.sm-card-num){margin:0;font-size:15px;font-weight:300;line-height:1.7}
.sm-anatomy-img img{mix-blend-mode:multiply}
.sm-specs{list-style:none;margin:8px 0 30px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.sm-specs li{margin:0;padding:18px 0;border-top:1px solid var(--sm-line);display:flex;flex-direction:column;gap:4px}
.sm-specs strong{font-size:24px;font-weight:300;line-height:1.2;color:var(--sm-navy)}
.sm-specs span{font-size:13px;letter-spacing:.04em;color:var(--sm-muted)}
@media (min-width:850px){
  .sm-about-copy,.sm-anatomy-text{margin-left:8.333%}
}
.sm-designbuilt .sm-why-media .img-inner{min-height:620px}
.sm-sec.sm-cta .sm-h2{color:var(--sm-cream);margin-bottom:12px}
.sm-sec.sm-cta p:not(.sm-eyebrow){font-size:16px;font-weight:300;color:#cfd6de;margin:0}
.sm-cta-buttons>.col-inner{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;align-items:center}
.sm-cta-buttons .button{margin:0!important}
.sm-sec.sm-cta a.button:not(.is-outline){background:var(--sm-cream)!important;border-color:var(--sm-cream)!important;color:var(--sm-navy)!important}
.sm-sec.sm-cta a.button:not(.is-outline):hover{background:#fff!important;border-color:#fff!important}
.sm-sec.sm-cta a.button.is-outline{background:transparent!important;border-color:rgba(244,239,232,.5)!important;color:var(--sm-cream)!important}
.sm-sec.sm-cta a.button.is-outline:hover{border-color:var(--sm-cream)!important;background:transparent!important}
@media (max-width:849px){
  .sm-cta-buttons>.col-inner{justify-content:flex-start;margin-top:24px}
  .sm-designbuilt .sm-why-media .img-inner{min-height:0}
}
@media (max-width:549px){
  .sm-sec .sm-about-copy .sm-lead{font-size:19px}
  .sm-cards .sm-card>.col-inner{padding:32px 24px}
  .sm-specs{gap:0 18px}
  .sm-specs strong{font-size:20px}
  .sm-cta-buttons .button{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  html:has(.sm-sec){scroll-behavior:auto}
}

/* ---------- core design system (was WPCode 50805 "SM Home 2026 - CSS"); printed last, so it wins ties ---------- */
/* Sawyer Mason homepage styles.
   WPCode > Add Snippet > CSS Snippet > Auto Insert > Site Wide Header.
   Everything is scoped to the sm- classes, so other pages are unaffected. */
:root{--sm-navy:#1b3553;--sm-cream:#f4efe8;--sm-paper:#faf8f4;--sm-brass:#d9bd8c;--sm-brass-dk:#8a6a35;--sm-ink:#1a2330;--sm-body:#3d4652;--sm-muted:#5b6470;--sm-line:#e6dfd4;--sm-radius:6px}

/* ---------- shared: sections built in UX Builder (class "sm-sec") ---------- */
.sm-sec,.sm-footer{font-family:'Open Sans',sans-serif;-webkit-font-smoothing:antialiased}
.sm-sec h1,.sm-sec h2,.sm-sec h3,.sm-sec p{font-family:'Open Sans',sans-serif;text-transform:none;letter-spacing:normal}
.sm-sec .sm-eyebrow,.sm-footer .sm-eyebrow{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--sm-brass-dk);margin:0 0 12px}
.sm-sec .sm-eyebrow--brass,.sm-footer .sm-eyebrow--brass{color:var(--sm-brass)}
.sm-sec .sm-h1{font-size:clamp(38px,4.2vw,60px);font-weight:300;line-height:1.08;color:var(--sm-navy);letter-spacing:-.01em;margin:0 0 22px}
.sm-sec .sm-h1 em,.sm-sec .sm-h2 em{font-style:italic;color:var(--sm-brass-dk)}
.sm-sec .sm-h2{font-size:clamp(28px,2.9vw,40px);font-weight:300;line-height:1.15;color:var(--sm-navy);margin:0 0 20px}
.sm-sec .sm-lead{font-size:17px;font-weight:300;line-height:1.65;color:var(--sm-body);max-width:480px;margin-bottom:26px}
.sm-sec p{color:var(--sm-body)}
.sm-sec a.sm-link{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--sm-navy);border-bottom:1px solid currentColor;padding-bottom:4px}
.sm-sec a.sm-link:hover{color:var(--sm-brass-dk)}

/* Flatsome buttons: filled = navy, outline = navy line, inside the navy card = cream */
.sm-sec a.button{font-family:'Open Sans',sans-serif;border-radius:0!important;font-size:12px;font-weight:500;letter-spacing:.18em;min-height:52px;line-height:50px;padding:0 26px;box-shadow:none!important;width:auto}
.sm-sec a.button:not(.is-outline){background:var(--sm-navy)!important;border:1px solid var(--sm-navy)!important;color:var(--sm-cream)!important}
.sm-sec a.button:not(.is-outline):hover{background:#12263d!important;border-color:#12263d!important;color:#fff!important}
.sm-sec a.button.is-outline{background:transparent!important;border:1px solid var(--sm-navy)!important;color:var(--sm-navy)!important}
.sm-sec a.button.is-outline:hover{background:var(--sm-navy)!important;color:var(--sm-cream)!important}
.sm-sec a.button.sm-btn-solid{background:var(--sm-navy);border:1px solid var(--sm-navy);color:var(--sm-cream)}
.sm-sec a.button.sm-btn-solid:hover{background:#12263d;border-color:#12263d;color:#fff}
.sm-sec a.button.sm-btn-line{background:transparent;border:1px solid var(--sm-navy);color:var(--sm-navy)}
.sm-sec a.button.sm-btn-line:hover{background:var(--sm-navy);color:var(--sm-cream)}
.sm-sec a.button.sm-btn-cream{background:var(--sm-cream);border:1px solid var(--sm-cream);color:var(--sm-navy)}
.sm-sec a.button.sm-btn-cream:hover{background:#fff;border-color:#fff}

/* Flatsome "Title" element: drop its own narrow container so the heading lines up
   with the eyebrow on the left and its link lines up with the page's right edge */
.sm-sec .section-title-container{max-width:none!important;width:100%;margin:0 0 36px!important;padding-left:0!important;padding-right:0!important}
.sm-sec .section-title{width:100%;margin:0;padding:0}
/* rows nested inside columns (like the product grid) use the full width too */
.sm-sec .col-inner .row:not(.sm-viz-row){max-width:none!important}
.sm-sec .section-title{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;border:0}
.sm-sec .section-title-main{flex:1 1 420px}
.sm-sec .section-title b{display:none}
.sm-sec .section-title-main{font-family:'Open Sans',sans-serif;font-size:clamp(28px,2.9vw,40px);font-weight:300;line-height:1.15;color:var(--sm-navy);text-transform:none;letter-spacing:0;padding:0;border:0;margin:0}
.sm-sec .section-title a{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--sm-navy);border-bottom:1px solid currentColor;padding-bottom:4px;margin-left:auto;white-space:nowrap}
.sm-sec .section-title a i{display:none}

/* ---------- hero ---------- */
.sm-hero .sm-hero-text>.col-inner{display:flex;flex-flow:row wrap;justify-content:flex-start;align-content:center;align-items:center;height:100%;padding:64px 56px 64px max(64px,5vw)}
.sm-hero .sm-hero-text>.col-inner>*{max-width:100%}
.sm-hero .sm-hero-text>.col-inner>:not(a.button){flex:0 0 100%}
.sm-hero .sm-hero-text>.col-inner>a.button{display:inline-flex;align-items:center;flex:0 0 auto}
.sm-hero .sm-hero-media .img,.sm-hero .sm-hero-media .img-inner{height:100%}
.sm-hero .sm-hero-media .img-inner{padding-top:0!important;min-height:640px}
.sm-hero .sm-hero-media .img-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sm-hero .button{margin:0 12px 12px 0}
/* ---------- collections ---------- */
.sm-collections .img{overflow:hidden}
.sm-collections .img img{transition:transform .5s}
.sm-collections .img:hover img{transform:scale(1.03)}
.sm-sec .sm-col-name{margin:14px 0 0;font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.sm-sec .sm-col-name a{color:var(--sm-navy)}

/* ---------- why + visualizer ---------- */
.sm-why .sm-why-text>.col-inner{display:flex;flex-direction:column;justify-content:center;height:100%;padding:96px max(64px,5vw)}
.sm-why h3{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sm-navy);margin:10px 0 8px}
.sm-why .sm-pillars p{font-size:14px;font-weight:300;line-height:1.55}
.sm-why .sm-why-media>.col-inner{position:relative;height:100%}
.sm-why .sm-why-media .img,.sm-why .sm-why-media .img-inner{height:100%}
.sm-why .sm-why-media .img-inner{padding-top:0!important;min-height:680px}
.sm-why .sm-why-media .img-inner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- floor finder: removed 2026-10-21 (Claude Code for Jay, "Finding a floor"): the old Home finder is gone; inc/home-finder.php + assets/css/pages/home-finder.css. Two generic helpers stay. ---------- */
.sm-rule{display:inline-block;width:40px;height:1px;background:var(--sm-brass);vertical-align:middle;margin-right:14px}
.sm-nowrap{white-space:nowrap}

/* ---------- footer ---------- */
.sm-footer{background:var(--sm-navy);color:var(--sm-cream);padding:88px max(64px,5vw) 40px;display:flex;flex-direction:column;gap:56px}
.sm-footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.sm-footer ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.sm-footer li{margin:0}
.sm-footer a{color:#e3e8ee;font-size:15px;font-weight:300}
.sm-footer a:hover{color:var(--sm-brass)}
.sm-footer__logo{padding:36px 0;border-top:1px solid rgba(244,239,232,.18);border-bottom:1px solid rgba(244,239,232,.18)}
.sm-footer__logo img{display:block;width:100%;max-width:1240px;height:auto;margin:0 auto}
.sm-footer__legal{display:flex;justify-content:space-between;gap:40px;font-size:13px;font-weight:300;line-height:1.6;color:#aab6c4}
.sm-footer__legal p{margin:0;color:#aab6c4}
.sm-footer__legal p:first-child{max-width:820px}


/* ---------- one shared left/right edge for every section ---------- */
/* Contained rows go full width with the same side margin the hero and "Why" text use.
   (Flatsome columns have 15px padding of their own, so the row gets 15px less.) */
.sm-sec > .section-content > .row:not(.row-collapse){max-width:none!important;width:auto;margin-left:0;margin-right:0;padding-left:calc(max(64px,5vw) - 15px);padding-right:calc(max(64px,5vw) - 15px)}

/* ---------- hero scroll-down arrow ---------- */
/* desktop: arrow measures from the whole hero section, so it sits at the true center of the page */
.sm-hero.section{position:relative}
.sm-hero>.section-content,.sm-hero .row,.sm-hero .sm-hero-media,.sm-hero .sm-hero-media>.col-inner{position:static}
.sm-hero .sm-hero-media>.col-inner{height:100%}
.sm-hero .sm-hero-media>.col-inner>:not(.img){margin:0!important;height:0;padding:0}
.sm-hero-scroll{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:10px;color:#fff!important;text-decoration:none!important;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;text-shadow:0 1px 8px rgba(0,0,0,.35);white-space:nowrap}
.sm-hero-scroll-arrow{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid rgba(255,255,255,.85);border-radius:50%;background:rgba(27,53,83,.35);font-size:18px;line-height:1;text-shadow:none;transition:background .2s;animation:smh-bob 2.2s ease-in-out infinite}
.sm-hero-scroll:hover .sm-hero-scroll-arrow{background:var(--sm-navy)}
.sm-hero-scroll:focus-visible{outline:2px solid #fff;outline-offset:6px}
@keyframes smh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ================= TABLET (Flatsome 849px) ================= */
@media (max-width:849px){
  .sm-sec > .section-content > .row:not(.row-collapse){padding-left:25px;padding-right:25px}
  /* tablet/phone: photo stacks on top, so keep the arrow at the bottom center of the photo */
  .sm-hero .sm-hero-media,.sm-hero .sm-hero-media>.col-inner{position:relative}
  .sm-hero-scroll{bottom:20px}
  .sm-hero-scroll-text{display:none}
  .sm-hero .sm-hero-media{order:-1}
  .sm-hero .sm-hero-media .img-inner{min-height:0;aspect-ratio:16/10}
  .sm-hero .sm-hero-text>.col-inner{padding:48px 40px 56px}
  .sm-why .sm-why-text>.col-inner{padding:72px 40px}
  .sm-why .sm-why-media .img-inner{min-height:0;aspect-ratio:16/10}
  .sm-footer{padding:64px 40px 32px}
  .sm-footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ================= MOBILE (Flatsome 549px) ================= */
@media (max-width:549px){
  .sm-sec > .section-content > .row:not(.row-collapse){padding-left:5px;padding-right:5px}
  .sm-hero .sm-hero-media .img-inner{aspect-ratio:4/3}
  .sm-hero .sm-hero-text>.col-inner{padding:36px 20px 44px}
  .sm-hero .sm-hero-text>.col-inner>a.button{flex:0 0 100%;justify-content:center;margin:0 0 10px}
  .sm-sec .sm-lead{font-size:16px}
  .sm-sec .section-title{flex-direction:column;align-items:flex-start;gap:14px}
  .sm-sec .section-title a{margin-left:0}
  .sm-why .sm-why-text>.col-inner{padding:56px 20px}
  .sm-sec .sm-col-name{font-size:12px;letter-spacing:.12em}
  .sm-footer{padding:56px 20px 28px;gap:40px}
  .sm-footer__cols{grid-template-columns:1fr;gap:32px}
  .sm-footer__legal{flex-direction:column;gap:12px}
}
@media (prefers-reduced-motion:reduce){.sm-sec *{transition:none!important;animation:none!important}}

/* Claude Code for Jay, 2026-10-09: a page that ends in the navy closing block (.sm-cta: About, Advantages, FAQ, Warranty, Inspiration). Flatsome's columns add 30px under the text, so the block had 96px above its text and 126px below; with the off-white footer row under it that read as an empty navy band. Take the 30px back so both sides are equal. */
/* 2026-10-09, later: no negative margin (Jay). The same 30px is taken off as padding instead: every column where they stand side by side (from 550px), only the last one where they are stacked. */
@media(min-width:550px){#content > .sm-sec.sm-cta:last-child .section-content > .row:last-child > .col{padding-bottom:0}}
@media(max-width:549px){#content > .sm-sec.sm-cta:last-child .section-content > .row:last-child > .col:last-child{padding-bottom:0}}

/* Claude Code for Jay, 2026-10-09: a highlighted note in page text (.sm-note). First use: the "Inspect before you install" clause at the top of the installation instructions. Off-white box, gold line on the left, text left-aligned even inside centred copy. */
.sm-note{max-width:860px;margin:22px auto 26px;padding:18px 24px;background:#f4efe8;border-left:3px solid #8a6a35;text-align:left}
.sm-note p{margin:0;font-size:15.5px;line-height:1.65;color:#3d4652}
.sm-note strong{color:#1b3553}

/* Claude Code for Jay, 2026-10-09 (urgent fix): Home's "Design inspired" block (.sm-why). Below 850px the visualizer card comes after the photo instead of lying on it, but the photo was still told to fill the whole column (height:100%), so the card was pushed out of the bottom of the block by its own height and lay on top of whatever follows the page: the footer. Now the photo takes the space that is left and the card sits inside the block. */
@media(max-width:849px){
.sm-why .sm-why-media>.col-inner{display:flex;flex-direction:column}
.sm-why .sm-why-media .img{flex:1 1 auto;height:auto;min-height:0}
.sm-why .sm-why-media .sm-viz-row{flex:0 0 auto}
/* Jay, 2026-10-12 (Claude Code): on phones the visualizer card now runs straight into the navy footer. The 40px strip of off-white
   under the card (his request of 2026-10-09) is gone, and so is the 16px that Flatsome puts under every image (the gap between the
   kitchen photo and the card). In their place: one thin divider at the card's lower edge, as wide as the card's text. On the Home
   page the footer's own full-width top line is made invisible below 850px, so there is one line, not two. No negative margins. */
.sm-why .sm-why-media .img{margin-bottom:0}
.home .sm-why .sm-viz>.col-inner{position:relative}
.home .sm-why .sm-viz>.col-inner::after{content:"";position:absolute;left:40px;right:40px;bottom:0;height:1px;background:rgba(255,255,255,.15)}
.home .smf-main{border-top-color:transparent}
}
@media(max-width:549px){.home .sm-why .sm-viz>.col-inner::after{left:20px;right:20px}}

/* ------------------------------------------------------------------
 * "Special Order" label. Claude Code for Jay, 2026-10-10. One look for every place a floor is listed: Flatsome's
 * product cards, colour and collection page cards, Swatch Guide tiles (smaller), the menu's featured floors and
 * the product page (as a line of its own). Printed by inc/badges.php, only for floors whose badge text contains
 * "Special Order". It is its own element, so the old rules in style.css that hide Flatsome's badges stay as they are.
 * On a picture it sits BOTTOM left (Jay, 2026-10-10: top left it covered the "SAWYER | MASON" wordmark printed on the swatch photos); the picture's box must be positioned (the card boxes all are).
 * ------------------------------------------------------------------ */
.sm-so{position:absolute;bottom:12px;left:12px;z-index:2;display:inline-block;max-width:calc(100% - 24px);background:#faf8f4;color:#1b3553;font-family:inherit;font-size:10.5px;font-style:normal;font-weight:600;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:6px 10px;pointer-events:none;white-space:normal}
.sm-so.sm-so--sm{bottom:6px;left:6px;max-width:calc(100% - 12px);font-size:8px;letter-spacing:.08em;padding:3px 5px}
.sm-so.sm-so--line{position:static;max-width:none;background:#f4efe8}
.sm-so.sm-so--line.sm-so--sm{display:table;margin-top:5px}
.sm-so-wrap{margin:14px 0 0;line-height:1}.sm-so-wrap--old{margin:0 0 14px}
.sm-tsw-img{position:relative}
.box-image .sm-so{transform:none}
@media(max-width:549px){
.sm-so{bottom:8px;left:8px;max-width:calc(100% - 16px);font-size:9px;letter-spacing:.1em;padding:5px 7px}
.sm-so.sm-so--sm{bottom:4px;left:4px;max-width:calc(100% - 8px);font-size:7px;letter-spacing:.05em;padding:3px 4px}
}

/* ---- Button corners. Claude Code for Jay, 2026-10-13. ONE value for the whole site: --sm-radius (in :root above; Jay chose 6px; 0px =
   square, as before). It rounds everything that is a button or a form field: Flatsome buttons, our own buttons, the
   Sample Box and its checkout fields, HubSpot fields and send buttons, the menu's buttons, the Resources chips.
   NOT rounded, on purpose: photos, photo frames, cards with pictures, the construction frame and its tabs, round icon
   buttons, the pill-shaped chips, and fields that are only an underline.
   Many older rules say "border-radius:0!important" for one kind of button each; so that this ONE rule decides, it is
   written with a stronger selector (the :not(#_) pair adds weight and matches every page) and !important. ---- */
html:not(#_):not(#_) :is(
  .button:not(.icon):not(.circle), .sm-btn, .sm-bs-btn, .smbp-btn, .sm-box-btn, .sm-box-quote-btn, .smb-btn, .smn-mbtn, .smp2-btn, .smp2-cta-button,
  .smcc-btn, .smcl-btn, .smpr-btn, .sm-res-btn, .smx-button, .sm-contact-button, .hs-button, .add-to-cart-button, .sm-res-chip, .smb-pill span, .sm-clear-filters, .smn-search button,
  .smsw-chip, .smsw-btn, .smsw-fbtn, .smsw-show, /* Swatch Wall (Claude Code for Jay, 2026-10-20) */
  input[type=submit], input[type=button], input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=search], input[type=url], input[type=date],
  select, textarea, .hs-input, .select2-container .select2-selection--single, #wcpay-hidden-input, #wcpay-hidden-invalid-input, #wcpay-hidden-div
){border-radius:var(--sm-radius)!important}
/* stay as they are: Flatsome's round search box, the menu's underline search field */
html:not(#_):not(#_) .form-flat :is(input, select, .button){border-radius:99px!important}
html:not(#_):not(#_) .smn-search input[type=search]{border-radius:0!important}
/* ---- Outline button side padding. Claude Code for Jay, 2026-10-21 (button padding audit). legacy.css gives every outline button
   (.button.primary.is-outline) 5px a side; inside an .sm-sec section base.css puts 26px back, but outside one (About's two outline
   buttons, the Lookbook's "Download the PDF", the Swatch Wall's "Your Spec List" next to "Order samples") the text sat 6px from the
   border. Now 26px like the filled buttons, small outline buttons 16px. Just strong enough to beat legacy.css (body + 3 classes):
   page rules that set their own padding (S|M Trade tools, the Lookbook hero) and the product page's own buttons (.smp2-btn,
   block 50535) keep theirs; link-style buttons (.is-link) are left alone. */
body .button.is-outline:not(.is-link):not(.smp2-btn){padding-left:26px;padding-right:26px}
body .button.is-outline:is(.is-small,.is-xsmall):not(.is-link):not(.smp2-btn){padding-left:16px;padding-right:16px}