/* Interior pages for Paint Stain Restore, in the "Taped & Ready" system defined in styles.css. */
.breadcrumbs{width:min(1280px,calc(100% - 64px));margin:26px auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:14px;font-weight:620;font-stretch:92%;color:var(--ink-soft)}
.breadcrumbs a{text-decoration:underline;text-decoration-color:var(--tape);text-decoration-thickness:2px;text-underline-offset:4px}
.breadcrumbs a:hover{color:var(--tape-deep)}

.page-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:72px;align-items:center;padding-block:44px 100px}
.page-hero-copy{max-width:680px}
.page-hero h1{font-size:clamp(46px,5.2vw,80px);line-height:.92}
.page-lead{max-width:560px;margin-top:26px;font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--ink-soft)}
.page-hero .hero-actions{margin-top:34px}
.page-hero-photo{position:relative;margin:0;transform:rotate(1.2deg)}
.page-hero-photo img{height:auto;aspect-ratio:5/4;box-shadow:var(--photo-shadow)}
.page-hero-photo .tape-label{position:absolute;left:-12px;bottom:24px;max-width:calc(100% - 24px);font-size:17px;transform:rotate(-2deg)}

.page-section{padding-block:92px}
.page-section.page-tone{background:var(--paper)}
.page-section-inner{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.page-section .section-heading{max-width:520px;margin:0}
.page-section .section-heading h2{font-size:clamp(34px,3.6vw,52px)}
.page-prose{max-width:68ch}
.page-prose p{font-size:18px;line-height:1.7;color:var(--ink-soft)}
.page-section .page-cards,.page-section .related-links{grid-column:1/-1}
.page-list{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.page-list li{display:flex;align-items:flex-start;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);font-size:17px;line-height:1.55}
.page-list li::before{content:'';flex:0 0 auto;width:24px;height:20px;margin-top:2px;border-radius:52% 48% 46% 54%/58% 46% 54% 42%;background:var(--spackle)}

.page-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:68px 38px;margin-top:24px}
.page-card{position:relative;display:flex;flex-direction:column;min-width:0;--tilt:-.5deg}
.page-card:nth-child(3n+2){--tilt:.6deg}
.page-card:nth-child(3n){--tilt:-.3deg}
.page-card img{height:auto;aspect-ratio:3/2;box-shadow:var(--photo-shadow);transform:rotate(var(--tilt));transition:transform .45s var(--ease)}
.page-card:hover img{transform:translateY(-4px)}
.page-card>div{position:relative;z-index:2;display:flex;flex:1;flex-direction:column;align-items:flex-start;padding-left:12px}
.page-card img+div{margin-top:-20px}
.card-meta{margin-top:12px;font-size:13px;font-weight:720;font-stretch:90%;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.page-card p:not(.card-meta){margin-top:14px;font-size:16px;line-height:1.6;color:var(--ink-soft)}
.card-arrow{display:inline-flex;margin-top:14px;color:var(--ink);transition:color .2s,transform .3s var(--ease)}
.card-arrow .i{width:22px;height:22px}
.page-card:hover .card-arrow{color:var(--tape-deep);transform:translate(2px,-2px)}

.proof-grid{grid-column:1/-1;display:grid;gap:40px}
.proof-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:32px;background:var(--paper);box-shadow:var(--photo-shadow)}
.proof-card-images{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.proof-photo{margin:0;min-width:0}
.proof-photo img{width:100%;height:auto;aspect-ratio:1.25}
.proof-photo figcaption{padding:9px 12px;font-size:13px;font-weight:700;color:var(--ink-soft)}
.proof-card-copy{padding:30px 30px 32px 0}
.proof-card-copy h3{margin:10px 0 14px;font-size:28px}
.proof-card-copy p{margin-top:15px;font-size:16px;line-height:1.7;color:var(--ink-soft)}
.proof-card-copy dl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 0;padding-top:18px;border-top:2px solid var(--ink)}
.proof-card-copy dt{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.proof-card-copy dd{margin:5px 0 0;font-size:15px;line-height:1.5}
.proof-reviews{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.proof-review{margin:0;padding:30px;background:var(--paper);box-shadow:var(--photo-shadow)}
.proof-review blockquote{margin:0;font-size:20px;line-height:1.6;color:var(--ink)}
.proof-review figcaption{display:flex;flex-direction:column;gap:5px;margin-top:20px;font-size:14px;color:var(--ink-soft)}
.proof-review cite{font-style:normal;font-weight:760;color:var(--ink)}

.page-faq{max-width:920px;margin:32px auto 0}
.related-links{display:flex;flex-wrap:wrap;gap:24px 34px;margin-top:8px;padding-inline:8px}
.related-links a{display:inline-flex;align-items:center;gap:10px;padding:12px 18px 10px;font-family:var(--marker);font-size:19px;line-height:1.2;color:var(--ink);transform:rotate(var(--r,-.8deg));transition:transform .35s var(--ease),background-color .2s}
.related-links a:nth-child(even){--r:.7deg}
.related-links a:hover{background-color:var(--tape-hi);transform:translateY(-2px)}

.page-close{position:relative;display:flex;justify-content:space-between;align-items:center;gap:40px;margin-block:56px 100px;padding:60px 56px 54px;background:var(--ink);color:var(--paper)}
.page-close::before{content:'';position:absolute;top:-13px;left:48px;width:128px;height:28px;background-color:var(--tape);background-image:var(--crepe);clip-path:var(--torn);transform:rotate(-2deg)}
.page-close h2{font-size:clamp(34px,3.4vw,50px);color:var(--paper)}
.page-close p{max-width:600px;margin-top:16px;font-size:17px;line-height:1.6;color:var(--ink-on-dark)}
.page-close .button{flex-shrink:0}

.contact-layout{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:72px;align-items:start}
.contact-layout h2{margin-bottom:22px}
.contact-layout>div>p:not(.form-notice){margin-bottom:18px;font-size:18px;line-height:1.6;color:var(--ink-soft)}
.contact-form{position:relative;display:grid;gap:6px;padding:46px 36px 36px;background:var(--wall);box-shadow:var(--photo-shadow)}
.contact-form::before{content:'';position:absolute;top:0;left:0;right:0;height:14px;background-color:var(--tape);background-image:var(--crepe)}
.contact-form label{margin-top:14px;font-size:14px;font-weight:720;font-stretch:92%}
.contact-form .button{justify-self:start;margin-top:22px}
.contact-form #contact-status{font-size:14px;line-height:1.5;color:var(--ink-soft)}
.contact-form .form-notice{margin:12px 0 4px}

@media(max-width:1120px){
  .breadcrumbs{width:calc(100% - 48px)}
  .page-hero,.page-section-inner,.contact-layout{gap:48px}
  .page-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 36px}
}
@media(max-width:900px){
  .page-hero,.page-section-inner,.contact-layout{grid-template-columns:1fr}
  .page-hero-photo{max-width:640px}
  .page-close{display:block}
  .page-close .button{margin-top:28px}
}
@media(max-width:760px){
  .breadcrumbs{width:calc(100% - 40px);margin-top:20px;font-size:13px}
  .page-hero{gap:44px;padding-block:32px 72px}
  .page-hero h1{font-size:clamp(42px,12.5vw,62px)}
  .page-lead{margin-top:20px;font-size:17px}
  .page-hero .hero-actions{margin-top:28px}
  .page-hero-photo .tape-label{font-size:15px;bottom:16px}
  .page-section{padding-block:68px}
  .page-section-inner{gap:30px}
  .page-prose p{font-size:17px}
  .page-list li{font-size:16px}
  .page-cards{grid-template-columns:1fr;gap:58px}
  .related-links{gap:20px 26px}
  .related-links a{font-size:17px}
  .page-close{margin-block:44px 72px;padding:46px 26px 34px}
  .page-close::before{left:24px}
  .contact-form{padding:40px 22px 26px}
  .proof-card{grid-template-columns:1fr;gap:0}
  .proof-card-copy{padding:24px}
  .proof-reviews{grid-template-columns:1fr}
}
@media(max-width:370px){
  .breadcrumbs{width:calc(100% - 32px)}
  .page-hero .hero-actions .button{padding-inline:18px}
}

/* A taped concept photo pinned under a section heading */
.has-photo .page-prose,.has-photo .page-list{grid-column:2;grid-row:1}
.section-photo{position:relative;grid-column:2;grid-row:2;max-width:560px;margin:40px 0 0 12px;transform:rotate(-1.2deg)}
.section-photo img{height:auto;aspect-ratio:4/3;box-shadow:var(--photo-shadow)}
.section-photo .tape-label{position:absolute;left:-10px;bottom:18px;font-size:16px;transform:rotate(-2deg)}
@media(max-width:900px){
  .has-photo .page-prose,.has-photo .page-list,.section-photo{grid-column:auto;grid-row:auto}
  .section-photo{max-width:520px;margin:4px 0 8px}
}