/* A steady rhythm: quick feedback, gentle entrances, one short sticky story. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-short: 200ms;
  --header-height: 103px;
}
html { scroll-padding-top: calc(var(--header-height) + 20px); }
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--paper);
  transition: background 280ms ease, box-shadow 280ms ease, border-color 280ms ease;
}
.site-header.is-scrolled {
  background: #fffdf8;
  border-color: #d9d0bf;
  box-shadow: 0 5px 22px #343b310d;
}
.site-header nav > a:not(.button) { position: relative; }
.site-header nav > a:not(.button)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 5px;
  height: 1px;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms var(--ease-out);
}
.site-header nav > a:hover::after,
.site-header nav > a:focus-visible::after { transform: scaleX(1); }
.hero-line { display: inline-block; }
.hero-identity { transform: translate3d(0, var(--hero-depth, 0px), 0); }
.roofline { display: block; width: 84px; height: 23px; color: var(--bronze); margin: 0 0 20px; }
.roofline path { stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: 0; }
.button, .copy, .menu, .quick-call {
  transition: transform var(--motion-short) var(--ease-out), background var(--motion-short) ease,
    color var(--motion-short) ease, box-shadow var(--motion-short) ease;
}
.button > span:not(.estimate-label), .text-link > span, .service > a > span,
.contact-option > span:last-child, .footer-links a > span {
  display: inline-block;
  transition: transform 250ms var(--ease-out);
}
.button:focus-visible { box-shadow: 0 5px 15px #81573526; }
.button:active, .copy:active, .menu:active, .quick-call:active { transform: translateY(1px) scale(.985); }
.service {
  position: relative;
  transition: transform 300ms var(--ease-out);
}
.service::before {
  content: '';
  position: absolute;
  inset: 10px -10px -10px;
  background: #eee5d559;
  border-radius: 8px;
  opacity: 0;
  z-index: -1;
  transition: opacity 250ms ease;
}
.service:focus-within { transform: translateY(-4px); }
.service:focus-within::before { opacity: 1; }
.service a { min-height: 44px; align-items: center; }
.contact-option { transition: background 200ms ease, color 200ms ease; }
.contact-option:focus-visible { background: #faf6ed66; }
.image-shutter {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--paper);
  transform-origin: right;
  pointer-events: none;
}
.process-layout {
  display: grid;
  grid-template-columns: .95fr 1fr;
  gap: 9%;
  align-items: start;
}
.process-visual {
  position: sticky;
  top: calc(var(--header-height) + 26px);
  height: min(430px, calc(100svh - var(--header-height) - 62px));
  min-height: 260px;
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--stone);
  isolation: isolate;
}
.process-visual > img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 55% 58%;
  transition: transform 650ms var(--ease-out);
}
.process-visual::after {
  content: '';
  position: absolute;
  inset: 20% 0 0;
  background: linear-gradient(transparent, #202c20d9);
  pointer-events: none;
}
.process-photo-note {
  position: absolute;
  top: 16px; left: 17px;
  background: #faf6ede8;
  padding: 4px 8px;
  color: var(--ink);
  font-size: 8px; letter-spacing: .4px;
}
.process-visual figcaption {
  position: absolute;
  z-index: 1;
  left: 27px; right: 27px; bottom: 26px;
  color: var(--paper);
}
.process-counter { display: flex; gap: 12px; align-items: center; font-size: 10px; letter-spacing: 1px; margin-bottom: 14px; }
.counter-rule { width: 36px; height: 1px; background: #faf6ed80; }
[data-step-title] { display: block; font: 27px/1.3 Georgia, serif; min-height: 2.6em; }
.process-progress { display: block; height: 2px; background: #faf6ed40; margin-top: 14px; overflow: hidden; }
.process-progress > span { display: block; height: 100%; background: #e5d3b8; transform: scaleX(var(--story-progress, .3333)); transform-origin: left; transition: transform 400ms var(--ease-out); }
.process .steps { display: block; }
.process .steps > li {
  min-height: 213px;
  padding: 18px 0 28px;
  border-bottom: 1px solid var(--border);
}
.process .steps > li:first-child { padding-top: 0; }
.process .steps > li:last-child { border-bottom: 0; }
.process .step-number {
  display: inline-flex;
  width: 33px; height: 33px;
  justify-content: center; align-items: center;
  padding: 0; margin-bottom: 15px;
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: color 250ms ease, background 250ms ease, border-color 250ms ease;
}
.process .steps > li.is-current .step-number { color: white; background: var(--bronze); border-color: var(--bronze); }
.quick-contact {
  position: fixed;
  z-index: 25;
  right: 26px; bottom: 25px;
  padding: 6px;
  border: 1px solid #d9d0bf;
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 7px 30px #343b3126;
}
.quick-contact .estimate-link { gap: 13px; padding: 13px 17px; }
.quick-contact .estimate-label { font-size: 12px; }
.quick-call { display: none; }
.quick-contact.is-leaving { pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .service:hover { transform: translateY(-5px); }
  .service:hover::before { opacity: 1; }
  .button:hover { box-shadow: 0 5px 16px #81573525; }
  .button:hover > span:not(.estimate-label), .button:focus-visible > span:not(.estimate-label),
  .text-link:hover > span, .text-link:focus-visible > span,
  .service:hover > a > span, .service:focus-within > a > span,
  .contact-option:hover > span:last-child, .contact-option:focus-visible > span:last-child,
  .footer-links a:hover > span { transform: translate(3px, -3px); }
  .contact-option:hover { background: #faf6ed40; }
  .process-visual:hover > img { transform: scale(1.035); }
  .home-banner > img { transition: transform 900ms var(--ease-out); }
  .home-banner:hover > img { transform: scale(1.025); }
}
@media (max-width: 760px) {
  :root { --header-height: 79px; }
  .site-header { position: sticky; z-index: 30; }
  .hero-identity { transform: none; }
  .roofline { width: 65px; height: 18px; margin-bottom: 16px; }
  .service:focus-within { transform: none; }
  .process-layout { grid-template-columns: 1fr; gap: 28px; }
  .process-visual { position: relative; top: auto; height: 265px; min-height: 0; }
  .process-visual figcaption { left: 22px; right: 22px; bottom: 21px; }
  [data-step-title] { font-size: 26px; min-height: 0; }
  .process .steps > li { min-height: 0; display: grid; grid-template-columns: 35px 1fr; padding: 23px 0; }
  .process .steps > li:first-child { padding-top: 0; }
  .process .step-number { margin: 0; }
  .process .steps h3 { font-size: 22px; }
  .process-counter, .process-progress { display: none; }
  .quick-contact {
    left: 0; right: 0; bottom: 0;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--border);
    display: flex; align-items: center; gap: 8px;
    padding: 9px max(14px, env(safe-area-inset-right)) calc(9px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  }
  .quick-contact .estimate-link { flex: 1; justify-content: center; gap: 10px; padding: 12px 10px; min-height: 46px; }
  .quick-contact .estimate-label { font-size: 11px; }
  .quick-contact .estimate-arrow { font-size: 17px; }
  .quick-contact .estimate-link .icon { width: 17px; height: 17px; }
  .quick-call { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 10px 8px; color: var(--bronze); font-size: 11px; border-radius: 5px; }
  /* A permanent footer allowance prevents the bottom bar covering any content. */
  footer { padding-bottom: calc(105px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(85px + env(safe-area-inset-bottom)); }
  input, select, textarea, button, a { scroll-margin-bottom: calc(85px + env(safe-area-inset-bottom)); }
}
@media (max-height: 600px) and (min-width: 761px) {
  .process-visual { position: relative; top: auto; height: 330px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-identity, .service, .button, .copy, .menu, .quick-call,
  .button > span, .text-link > span, .service > a > span, .contact-option > span:last-child,
  .footer-links a > span, .process-visual > img, .home-banner > img { transform: none !important; }
  .process-visual { position: relative; top: auto; }
}