/* Requested refinements. Load after the original layout stylesheets. */

/* Give the page canvas a deliberate color during top-edge overscroll. */
html {
  background: var(--deep);
  overscroll-behavior-y: none;
}
html[data-layout="mobile"] { background: var(--primer); }
body { overscroll-behavior-y: none; }
.top, .mtop { border-top: 0; }

/* One wordmark family and a shared text baseline, including the intro. */
.mark {
  align-items: baseline;
  gap: .34em;
  font-family: var(--serif);
  line-height: 1.1;
  white-space: nowrap;
}
.mark > b, .mark > span {
  font: 700 1em/1.1 var(--serif);
  letter-spacing: -.025em;
  opacity: 1;
}
.mark > .chip { flex: none; align-self: center; }
.mtop { gap: 12px; height: calc(60px + env(safe-area-inset-top)); }
.mtop .mark {
  min-width: 0;
  font-size: clamp(16px, 4.6vw, 20px);
  gap: .28em;
}
.mtop .mcall { flex: none; padding-inline: 12px; }
#splash .sp-mark { align-items: baseline; }
#splash .sp-mark b, #splash .sp-mark span {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
#splash .sp-mark .chip { flex: none; align-self: center; }
html[data-layout="mobile"] #splash .sp-mark { font-size: min(var(--ms), 12vw); }

/* Straight-edged actions: no clipped edges, skew, or dimensional effects. */
.tape, .ghost {
  -webkit-clip-path: none;
  clip-path: none;
  border-radius: 2px;
  transform: none;
  box-shadow: none;
  white-space: nowrap;
  justify-content: center;
}
.tape {
  border: 1px solid rgba(15, 34, 54, .18);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.tape:hover { border-color: rgba(15, 34, 54, .32); }
.tape:active, .ghost:active { transform: none; }
.ghost {
  background: var(--trim);
  color: var(--ink);
  border-color: var(--ink);
}
.on-dark .ghost {
  background: var(--paper);
  color: var(--deep);
  border-color: var(--paper);
}
.on-dark .ghost:hover {
  background: var(--trim);
  color: var(--deep);
  border-color: var(--trim);
}
.tape:focus-visible, .ghost:focus-visible, .mcall:focus-visible, .top .tel:focus-visible {
  outline: 3px solid var(--tape-hi);
  outline-offset: 4px;
}

/* Calls keep a solid, high-contrast surface over either photos or paper. */
.top .tel {
  height: 44px;
  padding: 0 13px;
  border: 1px solid var(--paper);
  border-radius: 2px;
  background: var(--paper);
  color: var(--deep);
  white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.top .tel:hover { background: var(--trim); border-color: var(--trim); }
.top.solid .tel, .mcall,
.mhero .ghost[href^="tel:"], .mbar .ghost[href^="tel:"] {
  background: var(--deep);
  color: var(--paper);
  border-color: var(--deep);
}
.top.solid .tel:hover, .mcall:hover,
.mhero .ghost[href^="tel:"]:hover, .mbar .ghost[href^="tel:"]:hover {
  background: var(--deep3);
  color: var(--paper);
  border-color: var(--deep3);
}
.hero:not(.mhero) .ghost[href^="tel:"] {
  background: var(--paper);
  color: var(--deep);
  border-color: var(--paper);
}
.hero:not(.mhero) .ghost[href^="tel:"]:hover {
  background: var(--trim);
  border-color: var(--trim);
}
.talk a[href^="tel:"], .foot a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--deep);
  border-radius: 2px;
  background: var(--deep);
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, border-color .2s;
}
.foot a[href^="tel:"] {
  background: var(--paper);
  color: var(--deep);
  border-color: var(--paper);
}
.talk a[href^="tel:"]:hover { background: var(--deep3); border-color: var(--deep3); }
.foot a[href^="tel:"]:hover { background: var(--trim); border-color: var(--trim); }

/* The header estimate is a flat strip of painter's tape with a small roll. */
.top .wrap { gap: clamp(20px, 2.4vw, 36px); }
.top .acts { gap: 14px; }
.top .acts > .tape {
  min-width: 144px;
  overflow: visible;
  isolation: isolate;
  animation: jerry-tape-enter .55s .15s var(--ease) both;
}
.top .acts > .tape .button-label { position: relative; z-index: 1; }
.top .acts > .tape .tape-roll {
  position: absolute;
  top: -14px;
  right: 12px;
  width: 26px;
  height: 26px;
  pointer-events: none;
  transform-origin: 50% 50%;
  transition: transform .3s var(--ease);
  animation: jerry-roll-enter .65s .15s var(--ease) backwards;
}
.top .acts > .tape .tape-roll svg { display: block; width: 100%; height: 100%; }
.top .acts > .tape .tape-tail { transition: transform .3s var(--ease); }
.top .acts > .tape:hover .tape-roll,
.top .acts > .tape:focus-visible .tape-roll { transform: translateY(-2px) rotate(-10deg); }
.top .acts > .tape:hover .tape-tail,
.top .acts > .tape:focus-visible .tape-tail { transform: translateX(2px); }
.has-splash .top .acts > .tape,
.has-splash .top .acts > .tape .tape-roll { animation-delay: 4.35s; }
@keyframes jerry-tape-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
@keyframes jerry-roll-enter {
  from { opacity: 0; transform: translateY(-4px) rotate(-18deg); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 1120px) {
  .top nav { display: none; }
  .top .acts { margin-left: auto; }
}
@media (max-width: 360px) {
  .mtop { padding-inline: 14px; gap: 9px; }
  .mtop .mcall { padding-inline: 10px; }
  .mhero h1 { font-size: clamp(38px, 12.2vw, 44px); }
}

/* Service cards read as choices, with a recognizable symbol and clear action. */
.services .service-note, .m-services .service-note {
  color: var(--paper);
  opacity: .92;
}
.service-help { font: 500 15px/1.4 var(--sans); color: inherit; opacity: .8; }
.sw a, .mlist a {
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(22, 26, 23, .12);
}
.sw a { height: 100%; }
.proof:hover span:last-child, .proof:focus-visible span:last-child {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.sw .chipc, .mlist .chipc {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-ink, var(--ink));
}
.sw .chipc .service-icon {
  display: block;
  width: 58px;
  height: 58px;
  flex: none;
  transition: transform .35s var(--ease);
}
.mlist .chipc .service-icon { display: block; width: 32px; height: 32px; flex: none; }
.sw .go { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.mlist .t { min-width: 0; }
.mlist a { transition: background .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.mlist a > svg { transition: transform .25s var(--ease); }
.sw a:focus-visible, .mlist a:focus-visible { outline: 3px solid var(--tape-hi); outline-offset: 4px; }
.sw a:focus-visible .go svg, .mlist a:focus-visible > svg { transform: translateX(4px); }

/* A small gallery response, independent of the original reveal transform. */
.gallery .g {
  transition: opacity .9s var(--ease), transform .9s var(--ease), translate .35s var(--ease), box-shadow .35s var(--ease);
}
.gallery .g:not(.rise), .strip figure { transition: translate .35s var(--ease), box-shadow .35s var(--ease); }
.gallery .g img, .strip figure img { transition: transform .55s var(--ease); transform-origin: center; }
@media (hover: hover) and (pointer: fine) {
  .gallery .g:hover, .strip figure:hover { translate: 0 -3px; box-shadow: 0 8px 18px -10px rgba(22, 26, 23, .38); }
  .gallery .g:hover img, .strip figure:hover img { transform: scale(1.035); }
  .strip { padding-block: 4px; }
  .sw a:hover .service-icon { transform: translateY(-3px); }
  .mlist a:hover { background: var(--paper); box-shadow: inset 0 0 0 2px var(--tape); }
  .mlist a:hover > svg { transform: translateX(4px); }
}

/* Every testimonial has the same explicit opening and closing punctuation. */
.pull q, .rv q { quotes: "“" "”" "‘" "’"; }
.pull q::before, .rv q::before { content: open-quote; }
.pull q::after, .rv q::after { content: close-quote; }

/* Small additions to the existing form and film typography. */
.required { color: #B3261E; font-family: var(--sans); font-weight: 600; margin-left: .18em; }
.est-form .form-required {
  font: 400 14px/1.4 var(--sans);
  color: var(--ink2);
  text-align: left;
  max-width: none;
  margin: 0 0 18px;
}
.form-required .required { margin-left: 0; }
.film-intro { font: 400 18px/1.5 var(--sans); color: var(--paper); opacity: .86; }
.fm-head .film-intro { max-width: 370px; text-align: left; line-height: 1.5; opacity: .86; }
.m-film .film-intro { font-size: 17px; max-width: 38ch; margin: -10px 0 26px; }

/* Only the new decorative interactions opt out; intro timings stay intact. */
@media (prefers-reduced-motion: reduce) {
  .top .acts > .tape, .top .acts > .tape .tape-roll { animation: none; }
  .top .acts > .tape .tape-roll, .top .acts > .tape .tape-tail,
  .gallery .g, .strip figure, .gallery .g img, .strip figure img,
  .sw .chipc .service-icon, .mlist a, .mlist a > svg { transition: none; }
  .top .acts > .tape:hover .tape-roll, .top .acts > .tape:focus-visible .tape-roll,
  .top .acts > .tape:hover .tape-tail, .top .acts > .tape:focus-visible .tape-tail,
  .gallery .g:hover img, .strip figure:hover img, .sw a:hover .service-icon,
  .mlist a:hover > svg, .mlist a:focus-visible > svg { transform: none; }
  .gallery .g:hover, .strip figure:hover { translate: none; }
}