/* Services alone: design composition with the reference site's readable type scale. */
.services-page { --services-space: clamp(70px, 7.8vw, 145px); }
.services-page :is(h2,h3,p,li) { overflow-wrap: anywhere; }
.services-page h2 { font-size: clamp(2rem, 3.34vw, 3rem); line-height: 1.65; letter-spacing: .1em; }
.services-sp-break { display: none; }
.services-rule { display: block; width: 48px; height: 1px; margin: 25px auto 32px; background: var(--gold-ink); }
.services-eyebrow { font: 1rem/1.5 Georgia, serif; color: var(--gold-ink); letter-spacing: .05em; }
.services-overview { position: relative; isolation: isolate; padding-block: var(--services-space); text-align: center; }
.services-overview h2 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); text-wrap: balance; }
.services-overview__scope { font-size: 1.1875rem; line-height: 2.2; }
.services-overview__scope span { display: inline-block; }
.services-overview__note { margin-top: 32px; font-size: 1.125rem; line-height: 2.1; }
.services-jump { margin-top: 64px; }
.services-jump h3 { display: flex; align-items: center; justify-content: center; gap: 24px; font-size: clamp(1.125rem, 1.7vw, 1.5rem); font-weight: 600; }
.services-jump h3::before,.services-jump h3::after { content: ''; width: 48px; height: 1px; flex: 0 1 48px; background: var(--gold); }
.services-jump ul { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); list-style: none; padding: 0; margin: 38px 0 0; border: 1px solid var(--gold); background: #fff4; }
.services-jump li + li { border-left: 1px solid var(--gold); }
.services-jump a {
  --jump-duration: .42s;
  --jump-ease: cubic-bezier(.22, 1, .36, 1);
  --jump-paint-scale: 0;
  --jump-arrow-out: 0px;
  --jump-arrow-in: -20px;
  --jump-arrow-color: var(--gold-ink);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  height: 100%;
  min-height: 175px;
  padding: 28px 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  color: #151714;
  text-align: center;
  line-height: 1.8;
  font-size: 1.25rem;
  font-weight: 600;
  touch-action: manipulation;
}
.services-jump a:hover { text-decoration: none; }
.services-jump a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #d1ae70;
  transform: scaleY(var(--jump-paint-scale));
  transform-origin: center top;
  transition: transform var(--jump-duration) var(--jump-ease);
  pointer-events: none;
}
/* Give single- and double-line labels the same centered slot and arrow baseline. */
.services-jump a > span:first-child { display: grid; align-content: center; flex: 1; min-height: 3.6em; }
.services-jump a > span:last-child {
  position: relative;
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  overflow: hidden;
  color: var(--jump-arrow-color);
  font-size: 0;
  transition: color var(--jump-duration) var(--jump-ease);
}
.services-jump a > span:last-child::before,
.services-jump a > span:last-child::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 6px;
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(var(--jump-arrow-out)) rotate(45deg);
  transition: transform var(--jump-duration) var(--jump-ease);
}
.services-jump a > span:last-child::after { transform: translateY(var(--jump-arrow-in)) rotate(45deg); }
.services-jump a:focus-visible {
  --jump-paint-scale: 1;
  --jump-arrow-out: 20px;
  --jump-arrow-in: 0px;
  --jump-arrow-color: #151714;
  outline-offset: -5px;
}
@media (hover: hover) and (pointer: fine) {
  .services-jump a:hover {
    --jump-paint-scale: 1;
    --jump-arrow-out: 20px;
    --jump-arrow-in: 0px;
    --jump-arrow-color: #151714;
  }
}
/* Keep the touch wipe filled after :active ends and until navigation starts. */
@media (hover: none) and (pointer: coarse) {
  .services-jump a.is-touch-pressed {
    --jump-paint-scale: 1;
    --jump-arrow-out: 20px;
    --jump-arrow-in: 0px;
    --jump-arrow-color: #151714;
  }
}
@media (prefers-reduced-motion: reduce) {
  .services-jump a::before,
  .services-jump a > span:last-child,
  .services-jump a > span:last-child::before,
  .services-jump a > span:last-child::after { transition: none; }
}
.services-feature { position: relative; isolation: isolate; padding-block: 45px var(--services-space); }
.services-feature__grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 7.5%; align-items: start; }
.services-feature__copy { padding-top: 20px; }
.services-feature--painting .services-feature__copy { padding-left: clamp(20px, 4.2vw, 90px); }
.services-index { display: flex; flex-direction: column; gap: 12px; font: 1rem/1.3 Georgia,serif; letter-spacing: .045em; color: var(--gold-ink); }
.services-index > span { font-size: 2.75rem; }
.services-index::after { content: ''; width: 48px; height: 1px; background: var(--gold-ink); margin-block: 7px 25px; }
.services-feature h3 { color: var(--gold-ink); font-size: 1.25rem; line-height: 1.9; letter-spacing: .06em; font-weight: 500; margin-top: 22px; }
.services-list { display: grid; gap: 8px; padding: 0; margin: 30px 0 38px; list-style: none; font-size: 1.25rem; line-height: 1.85; }
.services-list li { position: relative; padding-left: 34px; }
.services-list li::before { content: ''; position: absolute; width: 18px; height: 1px; top: .93em; left: 0; background: var(--gold-ink); }
.services-feature__copy > p:not(.services-index) { max-width: 31em; line-height: 2; }
.services-feature--painting .services-feature__copy > p:not(.services-index) { max-width: 24em; }
.services-feature .pill { margin-top: 32px; min-width: min(340px,100%); }
.services-painting-photos { display: grid; grid-template-columns: 1fr 2fr; align-items: start; }
.services-painting-photos__main { grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; aspect-ratio: .89; object-fit: cover; object-position: center; }
.services-painting-photos__inset { grid-column: 2; grid-row: 2; margin-top: -53%; position: relative; border: 7px solid #f8f5f0; border-right: 0; border-bottom: 0; aspect-ratio: 1.6; object-fit: cover; }
.services-painting-photos figcaption { grid-column: 2; grid-row: 3; padding-left: 7px; }
.services-feature--related { padding-top: 55px; }
.services-feature--related .services-feature__grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); }
.services-feature--related h2 { font-size: clamp(2rem, 3.15vw, 3rem); letter-spacing: .045em; }
.services-related-photos__main { aspect-ratio: 1.39; object-fit: cover; }
.services-related-photos__details { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.services-related-photos__details img { width: 100%; height: auto; aspect-ratio: 1.05; object-fit: cover; }
.services-overview::before,.services-overview::after,.services-feature--painting::after,.services-works::before,.services-before::before,.services-before::after { content: ''; position: absolute; z-index: -1; pointer-events: none; width: min(65vw,1050px); aspect-ratio: 3; background: url('images/services-gold-brush.webp') center / contain no-repeat; opacity: .34; }
.services-overview::before { left: -15%; top: 16%; width: 37%; transform: rotate(-57deg); }
.services-overview::after { right: -23%; top: 34%; width: 44%; transform: rotate(-58deg); }
.services-feature--painting::after { left: -7%; bottom: -60px; }
.services-works::before { left: -9%; bottom: -35px; transform: rotate(22deg); }
.services-before::before { left: -12%; bottom: -30px; transform: rotate(16deg); }
.services-before::after { display: none; }
.services-overview,.services-feature,.services-works,.services-before { overflow: clip; }
.services-works { position: relative; isolation: isolate; padding-block: var(--services-space); }
.services-section-title { text-align: center; }
.services-section-title .services-rule { margin-block: 15px 25px; }
.services-works__intro { text-align: center; margin-block: 30px 50px; }
.services-works__list { max-width: 1000px; margin: 0 auto; padding: 0; list-style: none; border-top: 1px solid var(--gold); }
.services-works__list > li { border-bottom: 1px solid #b3925266; }
.services-works__link { display: grid; grid-template-columns: 3rem minmax(0,1fr) 44px; align-items: center; gap: 28px; min-height: 112px; padding: 26px 8px; transition: background-color .3s, color .3s; }
.services-works__number { color: var(--gold-ink); font: 1.25rem/1.5 Georgia,serif; letter-spacing: .06em; }
.services-works__copy { min-width: 0; }
.services-works__copy h3 { font-size: clamp(1.125rem,1rem + .4vw,1.5rem); line-height: 1.85; letter-spacing: .04em; font-weight: 600; }
.services-works__phrase { display: inline-block; max-width: 100%; }
.services-works__copy p { margin-top: 10px; font-size: .9375rem; line-height: 1.9; }
.services-works__arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ad926366; border-radius: 50%; color: var(--gold-ink); font-size: 1rem; line-height: 1; transition: background-color .3s, color .3s, transform .3s; }
.services-works__link:is(:hover,:focus-visible) { background: #bd965510; color: var(--gold-ink); }
.services-works__link:is(:hover,:focus-visible) .services-works__arrow { background: var(--gold-ink); color: var(--paper); transform: translate(2px,-2px); }
@media (prefers-reduced-motion: reduce) {
  .services-works__link,.services-works__arrow { transition: none; }
}
.services-works__action { text-align: center; margin-top: 45px; }
.services-works__action .pill__arrow { background: #111; }
.services-before { position: relative; isolation: isolate; padding-block: var(--services-space); }
.services-before__grid { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: 7.5%; align-items: start; }
.services-before .services-rule { margin: 14px 0 28px; }
.services-before__grid > div > p:not(.services-eyebrow) { line-height: 2; }
.services-before__grid h2 + p { margin-top: 32px; }
.services-before__grid > div > p + p { margin-top: 28px; }
.services-checklist { margin: 0; padding: 0; list-style: none; }
.services-checklist li { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 24px; padding: 24px 0; border-bottom: 1px solid #bb934e99; align-items: center; font-size: 1.25rem; }
.services-checklist li > span { color: var(--gold-ink); font: 2.75rem/1.2 Georgia,serif; white-space: nowrap; }
.services-checklist li p { line-height: 1.8; }
.services-checklist small { display: block; font-size: 1.0625rem; }
.services-before__note { font-size: 1rem; margin-top: 22px; }
@media(min-width:700px) and (max-width:1099px) {
  .services-feature__grid,.services-feature--related .services-feature__grid { gap: 5%; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .services-feature--painting .services-feature__copy { padding-left: 0; }
  .services-feature h2,.services-feature--related h2 { font-size: 1.875rem; }
  .services-list { font-size: 1.0625rem; }
  .services-before__grid { gap: 5%; padding: 0; }
  .services-before h2 { font-size: 1.875rem; }
  .services-jump a { font-size: 1rem; }
}
@media(max-width:699px) {
  .services-page { --services-space: 58px; }
  .services-pc-break { display: none; }
  .services-sp-break { display: initial; }
  .services-page h2 { font-size: 1.875rem; line-height: 1.6; letter-spacing: .06em; }
  .services-overview { padding-block: 48px 52px; }
  .services-overview h2 { font-size: 1.375rem; }
  .services-rule { width: 30px; margin-block: 22px 26px; }
  .services-overview__scope,.services-overview__note { font-size: 1rem; line-height: 2; }
  .services-overview__note { margin-top: 24px; }
  .services-jump { margin-top: 35px; }
  .services-jump h3 { gap: 12px; font-size: 1.0625rem; }
  .services-jump h3::before,.services-jump h3::after { flex-basis: 25px; }
  .services-jump ul { grid-template-columns: minmax(0,1fr); margin-top: 24px; }
  .services-jump li + li { border-left: 0; border-top: 1px solid var(--gold); }
  .services-jump a { flex-direction: row; align-items: center; min-height: 62px; padding: 16px 19px; font-size: 1rem; gap: 12px; }
  .services-jump a > span:first-child { flex: 1; min-height: 0; }
  .services-feature { padding-block: 28px 50px; }
  .services-feature__grid,.services-feature--related .services-feature__grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .services-feature__copy,.services-feature--painting .services-feature__copy { padding: 0; }
  .services-index { gap: 7px; font-size: .75rem; }
  .services-index > span { font-size: 1.875rem; }
  .services-index::after { width: 30px; margin-block: 5px 17px; }
  .services-feature h3 { font-size: 1rem; margin-top: 17px; }
  .services-list { font-size: 1rem; line-height: 1.85; margin-block: 20px 24px; gap: 5px; }
  .services-list li { padding-left: 24px; }
  .services-list li::before { width: 14px; }
  .services-feature__copy > p:not(.services-index) { font-size: 1rem; line-height: 2; }
  .services-feature .pill { width: fit-content; min-width: 0; max-width: 100%; min-height: 46px; padding: 10px 17px; margin-top: 24px; font-size: .9375rem; gap: 30px; }
  .services-feature--related .pill { width: 100%; gap: 12px; }
  .services-painting-photos { margin-inline: 2% 0; grid-template-columns: 45% 55%; }
  .services-painting-photos__main { width: calc(100% - 28px); aspect-ratio: 1.27; object-position: center 45%; }
  .services-painting-photos__inset { border-width: 5px; margin-top: -57%; aspect-ratio: 1.68; }
  .services-painting-photos figcaption { padding-left: 5px; margin-top: 5px; }
  .services-feature--related { padding-top: 25px; }
  .services-feature--related h2 { font-size: 1.6875rem; }
  .services-related-photos__main { aspect-ratio: 1.97; object-position: center; }
  .services-related-photos__details { gap: 6px; margin-top: 6px; }
  .services-related-photos__details img { aspect-ratio: 1.63; }
  .services-overview::after,.services-feature--painting::after,.services-works::before,.services-before::before { width: 105%; }
  .services-overview::before { display: none; }
  .services-overview::after { right: auto; left: -30%; top: auto; bottom: -20px; transform: rotate(15deg); }
  .services-feature--painting::after { left: -35%; bottom: -15px; }
  .services-works::before,.services-before::before { left: auto; bottom: auto; right: -45%; top: -15px; }
  .services-works { padding-block: 42px 50px; }
  .services-section-title { text-align: left; }
  .services-eyebrow { font-size: .75rem; }
  .services-section-title .services-rule { margin: 11px 0 17px; }
  .services-works__intro { font-size: .9375rem; text-align: left; margin-block: 20px 24px; }
  .services-works__link { grid-template-columns: 26px minmax(0,1fr) 32px; gap: 14px; min-height: 96px; padding: 22px 0; }
  .services-works__number { font-size: 1rem; }
  .services-works__copy h3 { font-size: 1.0625rem; line-height: 1.8; letter-spacing: .02em; }
  .services-works__copy p { font-size: .8125rem; }
  .services-works__arrow { width: 32px; height: 32px; font-size: .875rem; }
  .services-works__action { margin-top: 20px; }
  .services-works__action .pill { width: 100%; min-height: 46px; font-size: .9375rem; }
  .services-before { padding-block: 44px 50px; }
  .services-before__grid { grid-template-columns: minmax(0,1fr); gap: 20px; padding: 0; }
  .services-before .services-rule { margin-block: 11px 20px; }
  .services-before__grid > div > p:not(.services-eyebrow) { font-size: 1rem; line-height: 2; }
  .services-before__grid h2 + p { margin-top: 22px; }
  .services-before__grid > div > p + p { margin-top: 18px; }
  .services-checklist li { grid-template-columns: 2.75rem minmax(0,1fr); gap: 18px; padding: 18px 0; font-size: 1rem; }
  .services-checklist li > span { font-size: 1.75rem; }
  .services-checklist small { font-size: .875rem; }
  .services-before__grid > div > .services-before__note { font-size: .875rem; }
  .type-expanded .services-jump h3::before,.type-expanded .services-jump h3::after { display: none; }
  .type-expanded .services-page h2 { overflow-wrap: anywhere; }
  .type-expanded.page-template-page-services .footer-bottom { flex-wrap: wrap; }
}