:root{--paper:#efeae1;--ink:#121110;--mute:#6f6a60;--accent:#8a6a43;--rule:rgba(18,17,16,.16);
  --serif:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --pad:clamp(32px,8vw,96px)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{background:var(--paper);color:var(--ink);font:300 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;
  padding:0 max(var(--pad),env(safe-area-inset-right)) env(safe-area-inset-bottom) max(var(--pad),env(safe-area-inset-left))}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:1px solid var(--accent);outline-offset:5px}

header{padding:clamp(20px,4vw,36px) 0 clamp(8px,2vw,16px);text-align:center}
.logo-wrap{font-size:0;line-height:0;font-weight:inherit}
.logo{display:inline-block;line-height:0}
.logo img{display:block;height:clamp(30px,4vw,44px);width:auto}

main{display:flex;justify-content:center;padding:clamp(32px,6vw,64px) 0 clamp(32px,5vw,56px)}
.btn{touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:1px solid var(--ink);padding:0 38px;font:400 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;transition:background .3s,color .3s}

.services{max-width:880px;margin:0 auto;padding:clamp(24px,4vw,48px) 0 clamp(24px,3.5vw,40px)}
.label{margin-bottom:clamp(20px,3vw,32px);text-align:center;font:400 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.services ul{list-style:none}
.services li{display:grid;grid-template-columns:1fr 1.2fr;gap:24px;align-items:baseline;padding:13px 0;border-top:1px solid var(--rule)}
.services h3{font:300 clamp(1.2rem,2.2vw,1.55rem)/1.15 var(--serif)}
.services p{color:var(--mute);font-size:13.5px}

footer{display:flex;justify-content:center;gap:16px;padding:clamp(20px,3vw,32px) 0;border-top:1px solid var(--rule)}
.social{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--ink);border-radius:50%;transition:background .3s,color .3s}
.social svg{width:20px;height:20px;fill:currentColor}

@media (hover:hover){
  .btn:hover,.social:hover{background:var(--ink);color:var(--paper)}
}
.btn:active,.social:active{background:var(--ink);color:var(--paper)}
@media (max-width:640px){
  .logo img{height:34px}
  main{padding:28px 0 32px}
  .services{padding-top:16px}
  .services li{grid-template-columns:1fr;gap:2px;padding:12px 0}
  .services p{font-size:13px}
  .btn{width:100%;max-width:320px}
}