:root{
  --ground:var(--leather-ground); --raised:#221912; --band:#251A12; --line:#3A2B20; --line2:#55402F;
  --text:#F2E7D7; --soft:#D8C7AF; --muted:#AE9B84; --accent:var(--leather);
  --radius:6px;
  /* tan at 60% over the brown ground, written out so it works without color-mix() */
  --stitch:1.5px dashed #865C36;
}
.btn.solid{box-shadow:inset 0 -2px 0 rgba(0,0,0,.22)}
/* shipping-tag label: a notched end with a punched hole, for the mail-in service */
.tag{position:relative;align-self:flex-start;margin:0;padding:6px 14px 6px 30px;background:#E9DCC4;color:#2A1D12;font:500 12px var(--label);letter-spacing:.04em;text-transform:uppercase;clip-path:polygon(12px 0,100% 0,100% 100%,12px 100%,0 50%)}
.tag::before{content:"";position:absolute;left:12px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--ground)}
.l-hero{position:relative;display:flex;align-items:flex-end;min-height:min(640px,82svh);border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate;background:var(--raised)}
/* the photo fills the hero behind the text, so it may be trimmed at the edges; the shade keeps the text readable */
.l-hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.l-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,color-mix(in srgb,var(--ground) 95%,transparent) 20%,color-mix(in srgb,var(--ground) 55%,transparent) 55%,color-mix(in srgb,var(--ground) 20%,transparent))}
/* browsers from before 2023 can't mix colours; a black shade keeps the text readable there */
@supports not (color:color-mix(in srgb,red,blue)){.l-hero::after{background:linear-gradient(to top,rgba(0,0,0,.9) 20%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.2))}}
.l-hero .wrap{width:100%;padding-top:clamp(120px,18vw,220px)}

/* two photo tiles across on phones keeps six services from becoming a very long scroll */
.services{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 14px}
@media (min-width:900px){.services{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}}
.svc-link{display:flex;flex-direction:column;gap:14px;text-decoration:none}
.svc-link picture{overflow:hidden;border-radius:var(--radius)}
.svc-link img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--raised);transition:transform .4s}
.svc-link:hover img{transform:scale(1.03)}
.svc-link .body{display:flex;flex-direction:column;gap:6px;flex:1}
@media (max-width:519px){.svc-link h3{font-size:17px}.svc-link .muted{font-size:14px}}
.svc-link .go{margin-top:auto;padding-top:6px;font-weight:700}
.svc-link .go::after{content:" →";content:" →" / "";color:var(--accent)}
.svc-link:hover .go{text-decoration:underline}
/* the quote panel carries the site's one stitched edge */
.summary .panel{border:0;border-radius:calc(var(--radius) + 4px);background:var(--ground);outline:var(--stitch);outline-offset:-9px;padding:clamp(26px,3vw,36px)}
.summary h3{font-size:18px}
.summary progress{width:100%;height:8px;accent-color:var(--accent)}
/* steps joined by a stitch line */
.steps li{position:relative;padding-top:26px;border-top:var(--stitch)}
.steps li::before{content:"";position:absolute;left:0;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.steps .num{color:var(--accent)}
footer.foot{border-top:var(--stitch)}
.portrait img{width:100%;height:auto}

.bullets{margin:0;padding-left:20px;color:var(--soft);display:flex;flex-direction:column;gap:6px}
.steps a{color:var(--accent)}
details.faq a{color:var(--accent)}

.thumbs{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.thumbs:empty{display:none}
.thumbs li{display:flex;flex-direction:column;gap:6px;width:108px}
.thumbs img{width:108px;height:108px;object-fit:contain;background:var(--raised);border:1px solid var(--line)}
.sent{max-width:640px}
.sent h3{font:700 clamp(26px,3vw,36px)/1.1 var(--display)}