:root{--brown:#602e0c;--maroon:#3f0705;--taupe:#998675;--dark:#26252b;--ink:#3a3a3a;--muted:#8e8480;--line:#d9d3cd;--bg:#fff}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:300 15px/1.7 Roboto,-apple-system,Helvetica,Arial,sans-serif}
h1,h2,h3{margin:0;font-weight:400;line-height:1.2}
.sc{font-family:"Playfair Display SC",Georgia,serif}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
.narrow{max-width:900px}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}

/* hero */
.hero{position:relative;background:#5b5048 url(/img/hero.webp) center 40%/cover no-repeat;color:#fff;text-align:center}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(70,58,50,.55),rgba(60,48,40,.72))}
.hero-in{position:relative;padding:28px 16px 34px}
.logo{font:400 110px/1 "Playfair Display",Georgia,serif;color:rgba(255,255,255,.35);margin-bottom:4px;letter-spacing:-2px}
.hero h1{font:400 30px/1.2 "Playfair Display SC",Georgia,serif}
.claim{margin:8px 0 0;font:300 15px Roboto,sans-serif;opacity:.95}

/* help */
.help{padding:70px 0 80px}
.help-grid{display:grid;grid-template-columns:1fr 360px;gap:56px;align-items:start}
.help h2{color:var(--brown);font-size:40px;margin-bottom:34px}
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:34px 40px}
.box h3{display:flex;align-items:center;gap:12px;color:var(--maroon);font:700 22px/1.2 Roboto,-apple-system,sans-serif;margin-bottom:10px}
.box svg{width:24px;height:24px;color:var(--maroon);flex:none}
.box p{margin:0;font-weight:400;padding-left:36px}

/* forms */
.js-form input,.js-form select,.js-form textarea{width:100%;font:400 14px Roboto,sans-serif;color:#333;background:#fff;border:1px solid #cfc7c0;border-radius:0;padding:10px 12px;outline:none;-webkit-appearance:none;appearance:none}
.js-form select{background-image:linear-gradient(45deg,transparent 50%,#777 50%),linear-gradient(135deg,#777 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
.js-form select:invalid{color:#888}
.js-form textarea{resize:vertical;min-height:90px}
.js-form ::placeholder{color:#8a8a8a;font-variant:small-caps;letter-spacing:.5px}
.js-form input:focus,.js-form select:focus,.js-form textarea:focus{border-color:var(--brown)}
.field-error{border-color:#c0392b!important}
.form-side{display:grid;gap:12px}
.form-side h3{color:var(--brown);font-size:20px;letter-spacing:1.5px;margin-bottom:4px}
.btn{border:0;cursor:pointer;font:400 16px "Playfair Display",Georgia,serif;letter-spacing:3px;text-transform:uppercase;padding:13px 20px;color:#fff;transition:filter .15s}
.btn:hover{filter:brightness(1.12)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn-dark{background:var(--maroon)}
.btn-taupe{background:var(--taupe)}
.msg{margin:4px 0 0;font-size:14px;font-weight:400;min-height:1px}
.msg.ok{color:#2e7d32}.msg.err{color:#b3261e}

/* helped */
.helped{background:var(--taupe);padding:60px 0}
.panel{background:var(--dark);color:#c9c4c0;padding:56px 64px 46px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.panel h2{color:#ebebeb;font-size:44px;margin-bottom:24px}
.panel p{font-size:15px;margin:0 0 16px}
.quotes{position:relative;margin-top:40px;text-align:center;padding:0 50px}
.q-track{position:relative;min-height:96px}
.q{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .6s}
.q.is-on{opacity:1;position:relative}
.q blockquote{margin:0;color:#fff;font:700 27px/1.3 "Playfair Display",Georgia,serif}
.q figcaption{margin-top:8px;color:#e8e2dc;font:400 15px "Playfair Display",Georgia,serif}
.q-nav{position:absolute;top:22px;background:none;border:0;color:#bbb;font-size:36px;line-height:1;cursor:pointer;padding:4px 10px}
.q-nav:hover{color:#fff}
.q-prev{left:0}.q-next{right:0}
.q-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.q-dots span{width:7px;height:7px;border-radius:50%;background:#666}
.q-dots span.on{background:#ddd}

/* who */
.who{padding:76px 0 90px}
.who h2{color:var(--brown);font-size:48px;margin-bottom:30px}
.name{color:var(--brown);font:500 24px Roboto,sans-serif;letter-spacing:3px;text-transform:uppercase;margin-bottom:22px}
.who p{margin:0 0 16px;font-weight:400}

/* contact */
.contact{position:relative;background:#4a4440 url(/img/hero.webp) center/cover no-repeat;padding:70px 0}
.contact::before{content:"";position:absolute;inset:0;background:rgba(40,34,30,.45)}
.contact .wrap{position:relative}
.contact-card{background:rgba(40,38,44,.86);padding:34px 44px 30px;text-align:center}
.contact-card h3{color:#fff;font-size:28px;margin-bottom:22px}
.row{display:grid;grid-template-columns:1fr 1fr 1fr 180px;gap:14px}
.contact-card .msg.ok{color:#a5d6a7}.contact-card .msg.err{color:#ffb4ab}

.foot{background:#1f1e22;color:#8f8a86;text-align:center;font-size:13px;padding:16px}

@media (max-width:960px){
  .help-grid{grid-template-columns:1fr;gap:44px}
  .row{grid-template-columns:1fr 1fr}
  .row .btn{grid-column:1/-1}
}
@media (max-width:620px){
  .help{padding:46px 0 56px}
  .help h2{font-size:30px}
  .boxes{grid-template-columns:1fr;gap:24px}
  .panel{padding:36px 20px 30px}
  .panel h2{font-size:32px}
  .quotes{padding:0 34px}
  .q blockquote{font-size:21px}
  .who h2{font-size:36px}
  .contact-card{padding:26px 18px}
  .contact-card h3{font-size:22px}
  .row{grid-template-columns:1fr}
  .logo{font-size:84px}
}