:root{
  --pf-bg:#faf9f7;
  --pf-ink:#1c1a17;
  --pf-sub:#7a736b;
  --pf-line:#e5e1db;
  --pf-accent:#b08d57;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;
  background:var(--pf-bg);
  color:var(--pf-ink);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

.pf-hero{max-width:1080px;margin:0 auto;padding:120px 24px 80px}
.pf-hero__label{margin:0 0 24px;font-size:12px;letter-spacing:.18em;color:var(--pf-accent);text-transform:uppercase}
.pf-hero__title{margin:0 0 24px;font-size:clamp(28px,5vw,52px);line-height:1.45;font-weight:700;letter-spacing:.02em}
.pf-hero__lead{margin:0;max-width:36em;color:var(--pf-sub);font-size:15px}

.pf-sec__title{
  margin:0 0 40px;font-size:13px;letter-spacing:.18em;font-weight:600;
  text-transform:uppercase;color:var(--pf-sub);
  padding-bottom:12px;border-bottom:1px solid var(--pf-line);
}
.pf-works,.pf-about,.pf-contact{max-width:1080px;margin:0 auto;padding:64px 24px}

.pf-grid{list-style:none;margin:0;padding:0;display:grid;gap:48px 32px;grid-template-columns:repeat(2,1fr)}
.pf-card__link{display:block}
.pf-card__thumb{
  overflow:hidden;border:1px solid var(--pf-line);background:#fff;aspect-ratio:4/3;
}
.pf-card__thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease}
.pf-card__link:hover .pf-card__thumb img{transform:scale(1.04)}
.pf-card__body{padding-top:20px}
.pf-card__cat{font-size:11px;letter-spacing:.12em;color:var(--pf-accent)}
.pf-card__title{margin:6px 0 8px;font-size:19px;font-weight:700}
.pf-card__desc{margin:0;font-size:14px;color:var(--pf-sub);line-height:1.9}

.pf-about__text{margin:0;max-width:40em;font-size:15px}

.pf-contact{text-align:center;padding-bottom:120px}
.pf-contact__text{margin:0 0 28px;font-size:15px;color:var(--pf-sub)}
.pf-contact__btn{
  display:inline-block;padding:18px 56px;background:var(--pf-ink);color:#fff;
  font-size:14px;letter-spacing:.08em;transition:opacity .3s;
}
.pf-contact__btn:hover{opacity:.75}

.pf-footer{padding:32px 24px;text-align:center;border-top:1px solid var(--pf-line);color:var(--pf-sub);font-size:12px}

@media (max-width:768px){
  .pf-hero{padding:80px 20px 48px}
  .pf-works,.pf-about,.pf-contact{padding:48px 20px}
  .pf-grid{grid-template-columns:1fr;gap:40px}
}