/* ==========================================================================
   Safe Move Mobility
   Component + motion layer. Design tokens live in theme.json.
   ========================================================================== */

:root {
  --smm-ease: cubic-bezier(.22, .61, .36, 1);
  --smm-ease-out: cubic-bezier(.16, 1, .3, 1);
  --smm-dur: .52s;
  --smm-header-h: 74px;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }

/* Keyboard focus stays obvious everywhere. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--wp--preset--color--buoy);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Screen reader only, used by the skip link. */
.smm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--wp--preset--color--pine); color: #fff;
  padding: .8rem 1.25rem; border-radius: 0 0 8px 0;
  font-family: var(--wp--preset--font-family--display); font-weight: 700;
  text-decoration: none;
}
.smm-skip:focus { left: 0; }

/* ==========================================================================
   1. MOTION
   Everything is visible by default. The reveal class is added by JS only
   when IntersectionObserver exists, so content can never get stuck hidden.
   ========================================================================== */

.smm-reveal-ready .smm-reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: opacity, transform;
}
.smm-reveal-ready .smm-reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--smm-dur) var(--smm-ease-out),
              transform var(--smm-dur) var(--smm-ease-out);
}
/* Staggered children inside a revealed group. */
.smm-reveal-ready .smm-stagger > * { opacity: 0; transform: translate3d(0, 16px, 0); }
.smm-reveal-ready .smm-stagger.is-in > * {
  opacity: 1; transform: none;
  transition: opacity .5s var(--smm-ease-out), transform .5s var(--smm-ease-out);
}
.smm-reveal-ready .smm-stagger.is-in > *:nth-child(1) { transition-delay: .04s; }
.smm-reveal-ready .smm-stagger.is-in > *:nth-child(2) { transition-delay: .11s; }
.smm-reveal-ready .smm-stagger.is-in > *:nth-child(3) { transition-delay: .18s; }
.smm-reveal-ready .smm-stagger.is-in > *:nth-child(4) { transition-delay: .25s; }
.smm-reveal-ready .smm-stagger.is-in > *:nth-child(5) { transition-delay: .32s; }
.smm-reveal-ready .smm-stagger.is-in > *:nth-child(6) { transition-delay: .39s; }

/* Hero runs on page load, never on scroll, so the first screen is instant.
   Gated behind .smm-anim, which an inline script in the head sets before
   the first paint. No script, no animation, and the hero is simply visible.
   The headline can never be left stuck at zero opacity. */
.smm-anim .smm-hero-in > * { animation: smmRise .62s var(--smm-ease-out) both; }
.smm-anim .smm-hero-in > *:nth-child(2) { animation-delay: .07s; }
.smm-anim .smm-hero-in > *:nth-child(3) { animation-delay: .14s; }
.smm-anim .smm-hero-in > *:nth-child(4) { animation-delay: .21s; }
.smm-anim .smm-hero-in > *:nth-child(5) { animation-delay: .28s; }
@keyframes smmRise {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .smm-reveal-ready .smm-reveal,
  .smm-reveal-ready .smm-stagger > *,
  .smm-anim .smm-hero-in > * {
    opacity: 1 !important; transform: none !important; animation: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   2. HEADER
   ========================================================================== */

.smm-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255, 253, 247, .93);
  backdrop-filter: saturate(1.5) blur(9px);
  -webkit-backdrop-filter: saturate(1.5) blur(9px);
  border-bottom: 1px solid var(--wp--preset--color--line);
  transition: box-shadow .25s var(--smm-ease), background .25s var(--smm-ease);
}
.smm-header.is-stuck { box-shadow: 0 6px 22px -14px rgba(12, 44, 30, .45); }

.smm-header .wp-block-site-logo img { height: 42px; width: auto; display: block; }

/* Utility strip above the nav. */
.smm-topbar {
  background: var(--wp--preset--color--pine);
  color: var(--wp--preset--color--sage);
  font-family: var(--wp--preset--font-family--display);
  font-size: .8125rem; font-weight: 600; letter-spacing: .015em;
}
.smm-topbar a { color: var(--wp--preset--color--birch); text-decoration: none; }
.smm-topbar .wp-block-group { gap: .5rem 1.4rem; }
@media (max-width: 640px) { .smm-topbar { display: none; } }
.smm-topbar a:hover { color: #fff; text-decoration: underline; }

/* Nav underline that grows from the left. */
.smm-header .wp-block-navigation-item__content { position: relative; padding-block: .35rem; }
.smm-header .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--wp--preset--color--buoy);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--smm-ease);
}
.smm-header .wp-block-navigation-item__content:hover::after,
.smm-header .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }

/* Mobile menu overlay */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--wp--preset--color--pine) !important;
  padding: clamp(1.5rem, 6vw, 3rem);
}
.wp-block-navigation__responsive-container.is-menu-open a { color: var(--wp--preset--color--birch) !important; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.35rem; }
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open { color: currentColor; }

/* ==========================================================================
   3. BRAND DEVICES
   ========================================================================== */

/* The buoy stripe. Repeats across the site as the signature marker. */
.smm-stripe { height: 6px; width: 100%; display: block; }
.smm-stripe::before {
  content: ""; display: block; height: 100%;
  background: linear-gradient(to bottom,
    var(--wp--preset--color--buoy) 0 33.33%,
    var(--wp--preset--color--birch) 33.33% 66.66%,
    var(--wp--preset--color--spruce) 66.66% 100%);
}
.smm-stripe-short { width: 62px; height: 6px; border-radius: 3px; overflow: hidden; }

/* Eyebrow label. Set like lettering on a truck door. */
.smm-eyebrow {
  font-family: var(--wp--preset--font-family--display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--wp--preset--color--buoy);
  display: inline-flex; align-items: center; gap: .6rem;
}
.smm-eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; flex: none;
}
.smm-on-dark .smm-eyebrow { color: var(--wp--preset--color--sage); }

/* ==========================================================================
   4. CARDS AND PANELS
   ========================================================================== */

.smm-card {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--lg);
  overflow: hidden;
  transition: transform .3s var(--smm-ease), box-shadow .3s var(--smm-ease),
              border-color .3s var(--smm-ease);
}
.smm-card:hover {
  transform: translateY(-4px);
  border-color: #CFC7B0;
  box-shadow: 0 2px 4px rgba(12, 44, 30, .06), 0 18px 38px -16px rgba(12, 44, 30, .26);
}
.smm-card img { transition: transform .55s var(--smm-ease); display: block; }
.smm-card:hover img { transform: scale(1.035); }

.smm-card-flat {
  background: var(--wp--preset--color--white);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--md);
}

/* Panel sitting on the pine background. */
.smm-panel-dark {
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(246, 242, 229, .14);
  border-radius: var(--wp--custom--radius--md);
}

/* Numbered steps. Numbering is used only where order genuinely matters. */
.smm-step { position: relative; }
.smm-step .smm-step-n {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800; font-size: 2.6rem; line-height: 1;
  color: var(--wp--preset--color--buoy);
  display: block; margin-bottom: .55rem;
}
.smm-on-dark .smm-step .smm-step-n { color: var(--wp--preset--color--sage); }

/* Checked list used for what is included. */
.smm-check ul { list-style: none; padding-left: 0; margin: 0; }
.smm-check li {
  position: relative; padding-left: 1.85rem; margin-bottom: .6rem; line-height: 1.55;
}
.smm-check li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: var(--wp--preset--color--spruce);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 4.8 11.4l1.4-1.4 3.4 3.4 8-8L19 6.8z' fill='%23fff'/%3E%3C/svg%3E") center/118% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.6 16.2 4.8 11.4l1.4-1.4 3.4 3.4 8-8L19 6.8z' fill='%23fff'/%3E%3C/svg%3E") center/118% no-repeat;
}
.smm-on-dark .smm-check li::before { background: var(--wp--preset--color--sage); }

/* ==========================================================================
   5. HERO
   ========================================================================== */

.smm-hero {
  position: relative; isolation: isolate; overflow: hidden;
  /* Pine sits under the photo. If the image is slow or fails, the
     headline is still readable instead of cream on cream. */
  background-color: var(--wp--preset--color--pine);
}
.smm-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, rgba(12, 44, 30, .93) 0%, rgba(12, 44, 30, .72) 52%, rgba(20, 64, 44, .5) 100%);
  pointer-events: none;
}
.smm-hero .wp-block-cover__image-background { z-index: -2; }

/* Trust strip under the hero. */
.smm-trustbar {
  display: grid; gap: .25rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.smm-trustbar .smm-trust-item {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600; font-size: .9375rem;
  padding-block: .55rem;
}

/* ==========================================================================
   6. FORMS
   ========================================================================== */

.smm-form { display: grid; gap: 1.05rem; }
.smm-field { display: grid; gap: .38rem; }
.smm-field label {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600; font-size: .875rem; color: var(--wp--preset--color--pine);
}
.smm-field .smm-req { color: var(--wp--preset--color--buoy); }
.smm-form input[type="text"],
.smm-form input[type="email"],
.smm-form input[type="tel"],
.smm-form input[type="date"],
.smm-form select,
.smm-form textarea {
  width: 100%; font: inherit; font-size: 1rem;
  color: var(--wp--preset--color--granite);
  background: #fff;
  border: 1.5px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--sm);
  padding: .78rem .9rem;
  transition: border-color .2s var(--smm-ease), box-shadow .2s var(--smm-ease);
}
.smm-form textarea { min-height: 118px; resize: vertical; }
.smm-form input:focus, .smm-form select:focus, .smm-form textarea:focus {
  border-color: var(--wp--preset--color--spruce);
  box-shadow: 0 0 0 3px rgba(30, 107, 71, .16);
  outline: none;
}
.smm-form .smm-row { display: grid; gap: 1.05rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .smm-form .smm-row { grid-template-columns: 1fr; } }

.smm-btn {
  display: inline-block; text-align: center; cursor: pointer;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; font-size: 1.0625rem; line-height: 1.2;
  color: #fff; background: var(--wp--preset--color--buoy);
  border: 0; border-radius: 999px; padding: .95em 1.85em;
  text-decoration: none;
  transition: background .2s var(--smm-ease), transform .18s var(--smm-ease),
              box-shadow .2s var(--smm-ease);
}
.smm-btn:hover { background: #B84B08; transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(217, 93, 14, .7); }
.smm-btn:active { transform: translateY(0); }

.smm-form-note { font-size: .875rem; color: var(--wp--preset--color--fog); }
.smm-form-msg { display: none; border-radius: var(--wp--custom--radius--sm); padding: .85rem 1rem; font-size: .95rem; }
.smm-form-msg.is-ok   { display: block; background: #E7F1EA; color: #14402C; border: 1px solid #B8D6C4; }
.smm-form-msg.is-err  { display: block; background: #FBEADF; color: #8C3A05; border: 1px solid #F0C4A5; }

/* Honeypot for bots. Never shown, never announced. */
.smm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Buttons on the Gutenberg button block get the same lift. */
.wp-block-button__link { transition: background .2s var(--smm-ease), transform .18s var(--smm-ease), box-shadow .2s var(--smm-ease), color .2s var(--smm-ease); }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(217, 93, 14, .65); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { box-shadow: 0 10px 22px -12px rgba(12, 44, 30, .5); }

/* ==========================================================================
   7. FAQ (core/details)
   ========================================================================== */

.wp-block-details {
  background: #fff;
  border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--md);
  padding: 1.1rem 1.35rem;
  transition: border-color .25s var(--smm-ease), box-shadow .25s var(--smm-ease);
}
.wp-block-details[open] { border-color: #CFC7B0; box-shadow: 0 1px 2px rgba(12,44,30,.05), 0 10px 24px -14px rgba(12,44,30,.24); }
.wp-block-details summary {
  cursor: pointer; list-style: none;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700; font-size: 1.0625rem; color: var(--wp--preset--color--pine);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
  content: ""; flex: none; width: 1.15rem; height: 1.15rem; margin-top: .18rem;
  background: var(--wp--preset--color--buoy);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.6 5.4 9l1.4-1.4 5.2 5.2 5.2-5.2L18.6 9z'/%3E%3C/svg%3E") center/100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.6 5.4 9l1.4-1.4 5.2 5.2 5.2-5.2L18.6 9z'/%3E%3C/svg%3E") center/100% no-repeat;
  transition: transform .28s var(--smm-ease);
}
.wp-block-details[open] summary::after { transform: rotate(180deg); }
.wp-block-details > *:not(summary) { margin-top: .75rem; color: var(--wp--preset--color--granite); }

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.smm-footer a { text-decoration: none; }
.smm-footer a:hover { text-decoration: underline; }
.smm-footer .wp-block-site-logo img { height: 62px; width: auto; }

/* ==========================================================================
   9. SERVICE AREA GRID
   ========================================================================== */

.smm-town-grid {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  list-style: none; padding: 0; margin: 0;
}
.smm-town-grid li {
  background: #fff; border: 1px solid var(--wp--preset--color--line);
  border-radius: var(--wp--custom--radius--sm);
  padding: .62rem .85rem; font-size: .9375rem; font-weight: 600;
  font-family: var(--wp--preset--font-family--display);
  color: var(--wp--preset--color--pine);
  transition: border-color .2s var(--smm-ease), transform .2s var(--smm-ease), background .2s var(--smm-ease);
}
.smm-town-grid li:hover { border-color: var(--wp--preset--color--spruce); transform: translateY(-2px); background: #FCFBF6; }
.smm-on-dark .smm-town-grid li {
  background: rgba(255,255,255,.055); border-color: rgba(246,242,229,.16);
  color: var(--wp--preset--color--birch);
}
.smm-on-dark .smm-town-grid li:hover { background: rgba(255,255,255,.1); border-color: var(--wp--preset--color--sage); }

/* ==========================================================================
   10. UTILITIES AND FIXES
   ========================================================================== */

.smm-on-dark, .smm-on-dark p, .smm-on-dark li { color: var(--wp--preset--color--birch); }
.smm-on-dark h1, .smm-on-dark h2, .smm-on-dark h3,
.smm-on-dark h4, .smm-on-dark h5, .smm-on-dark h6 { color: var(--wp--preset--color--birch); }
.smm-on-dark a { color: var(--wp--preset--color--sage); }

.smm-measure { max-width: 62ch; }
.smm-lead { font-size: clamp(1.075rem, 2vw, 1.25rem); line-height: 1.6; }

/* Images never cause layout shift. */
img, video, svg { max-width: 100%; height: auto; }
.wp-block-cover { isolation: isolate; }

/* Sections run edge to edge and carry their own gutter. Only the inline
   padding is set here so the block editor keeps control of the vertical. */
.smm-section,
.smm-section-tight,
.smm-gutter {
  padding-inline: clamp(1.15rem, 5vw, 2.5rem);
}
/* Fallback vertical rhythm if a section has no padding set in the editor. */
.smm-section:not([style*="padding-top"])       { padding-block: var(--wp--preset--spacing--60); }
.smm-section-tight:not([style*="padding-top"]) { padding-block: var(--wp--preset--spacing--50); }

/* Sticky call bar on small screens. Keeps the phone number one tap away. */
.smm-callbar { display: none; }
@media (max-width: 780px) {
  .smm-callbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: var(--wp--preset--color--pine);
    border-top: 1px solid rgba(246,242,229,.16);
    padding: .55rem .7rem calc(.55rem + env(safe-area-inset-bottom, 0px));
    gap: .55rem;
  }
  .smm-callbar a {
    flex: 1; text-align: center; text-decoration: none;
    font-family: var(--wp--preset--font-family--display);
    font-weight: 700; font-size: .95rem; padding: .78rem .5rem; border-radius: 999px;
  }
  .smm-callbar .smm-call { background: var(--wp--preset--color--birch); color: var(--wp--preset--color--pine); }
  .smm-callbar .smm-quote { background: var(--wp--preset--color--buoy); color: #fff; }
  body { padding-bottom: 68px; }
}

/* Editor parity so the back end looks like the front end. */
.editor-styles-wrapper .smm-on-dark h1, .editor-styles-wrapper .smm-on-dark h2,
.editor-styles-wrapper .smm-on-dark h3, .editor-styles-wrapper .smm-on-dark h4,
.editor-styles-wrapper .smm-on-dark h5, .editor-styles-wrapper .smm-on-dark h6,
.editor-styles-wrapper .smm-on-dark p,  .editor-styles-wrapper .smm-on-dark li {
  color: var(--wp--preset--color--birch);
}
.editor-styles-wrapper .smm-reveal { opacity: 1 !important; transform: none !important; }