:root{
  --paper:#f3f1ea;
  --paper2:#e7e2d6;
  --ink:#1f211f;
  --graphite:#313431;
  --ochre:#b98b43;
  --line:rgba(31,33,31,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
.brand-mark{
  position:absolute;z-index:20;left:30px;top:26px;display:grid;grid-template-columns:auto auto;align-items:baseline;gap:0 5px
}
.brand-mark strong{font-size:24px;letter-spacing:.08em}
.brand-mark span{font-size:14px;font-weight:300}
.brand-mark small{grid-column:1/3;font-size:7px;letter-spacing:.36em;margin-top:3px}
.index-tab{
  position:fixed;z-index:70;left:0;bottom:34px;border:0;background:var(--ochre);color:#151713;
  padding:14px 16px 14px 20px;display:flex;gap:24px;align-items:center;
  font-size:9px;font-weight:700;letter-spacing:.18em;cursor:pointer
}
.index-tab b{font-size:18px;font-weight:300}
.index-panel{
  position:fixed;z-index:80;inset:0;background:#202320;color:#f3f1ea;padding:70px 7vw;
  transform:translateY(102%);transition:.45s cubic-bezier(.2,.75,.2,1);
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:min-content;gap:0
}
.index-panel.open{transform:none}
.index-close{position:absolute;right:30px;top:20px;border:0;background:none;color:#fff;font-size:36px;cursor:pointer}
.index-kicker{grid-column:1/4;font-size:9px;letter-spacing:.28em;color:#b9ad99;margin-bottom:42px}
.index-panel a{padding:28px 24px;border:1px solid #464946;margin-right:-1px;margin-bottom:-1px;display:grid;gap:10px}
.index-panel a span{font-size:9px;color:var(--ochre);letter-spacing:.16em}
.index-panel a strong{font-family:Georgia,"Times New Roman",serif;font-size:32px;font-weight:400}
.index-panel a em{font-size:10px;color:#aeb1ad;font-style:normal}
.hero{
  min-height:760px;display:grid;grid-template-columns:38% 52% 10%;border-bottom:1px solid var(--line)
}
.hero-copy{padding:150px 5vw 70px 7vw;display:flex;flex-direction:column;justify-content:center}
.kicker{font-size:8px;letter-spacing:.28em;font-weight:600;color:#76796f}
.hero h1,.services h2,.projects h2,.process h2,.quality h2,.contact h2{
  font-family:Georgia,"Times New Roman",serif;font-weight:400
}
.hero h1{font-size:clamp(54px,5.5vw,86px);line-height:1.02;margin:22px 0 30px}
.hero h1 span{color:var(--ochre)}
.hero .intro{max-width:500px;font-size:13px;line-height:1.8;color:#5e625b}
.project-link{display:inline-flex;gap:35px;align-items:center;margin-top:28px;width:max-content;border-bottom:1px solid var(--ink);padding:0 0 8px;font-size:9px;font-weight:700;letter-spacing:.14em}
.hero-photo{
  position:relative;background:
    linear-gradient(180deg,transparent 55%,rgba(10,10,10,.2)),
    url('https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=1500&q=86') center/cover
}
.project-meta{
  position:absolute;left:0;right:0;bottom:0;background:rgba(28,30,28,.88);color:#eee9df;
  display:grid;grid-template-columns:repeat(3,1fr);backdrop-filter:blur(8px)
}
.project-meta div{padding:20px;border-right:1px solid #4b4e4b}
.project-meta span{display:block;font-size:7px;letter-spacing:.18em;color:#aaa99f;margin-bottom:7px}
.project-meta strong{font-size:10px;letter-spacing:.08em}
.hero-aside{background:var(--graphite);color:#f4f1ea;padding:150px 22px 30px;display:flex;flex-direction:column;align-items:flex-start}
.hero-aside span{font-size:8px;letter-spacing:.22em;color:#b7b9b5}
.hero-aside strong{font-family:Georgia,"Times New Roman",serif;font-size:58px;font-weight:400;color:var(--ochre);margin-top:5px}
.hero-aside p{margin-top:auto;font-size:8px;line-height:1.8;letter-spacing:.16em}
.statement{display:grid;grid-template-columns:120px 1fr 300px;align-items:center;padding:70px 5vw;background:#e8e2d6;border-bottom:1px solid var(--line)}
.statement-no{font-family:Georgia,"Times New Roman",serif;font-size:62px;color:#c7beae}
.statement>p{font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,3vw,44px);line-height:1.3;margin:0;max-width:900px}
.statement-sign{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:24px;color:var(--ochre);transform:rotate(-3deg);justify-self:end}
.services{padding:100px 5vw}
.services header{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:35px}
.services h2{font-size:clamp(48px,5vw,76px);margin:12px 0 0}
.service-row{display:grid;grid-template-columns:repeat(4,1fr)}
.service-row article{padding:38px 28px;border-right:1px solid var(--line);min-height:270px}
.service-row article:first-child{border-left:1px solid var(--line)}
.service-row span{font-size:8px;letter-spacing:.2em;color:var(--ochre)}
.service-row h3{font-size:20px;font-weight:600;margin:55px 0 14px}
.service-row p{font-size:11px;line-height:1.75;color:#666960}
.projects{background:#222522;color:#efede7;padding:100px 5vw}
.projects-head{display:grid;grid-template-columns:.7fr 1fr .8fr;gap:40px;align-items:end;margin-bottom:60px}
.projects-head h2{font-size:clamp(48px,5vw,76px);line-height:1.05;margin:12px 0 0}
.projects-head>p:last-child{font-size:11px;line-height:1.8;color:#b3b6b0}
.project{display:grid;grid-template-columns:1fr 1fr .78fr;border-top:1px solid #4b4e4b;min-height:480px}
.project-two{grid-template-columns:.78fr 1fr 1fr}
.project-photo{position:relative;background-size:cover;background-position:center;border-right:1px solid #4b4e4b}
.project-photo span{position:absolute;left:18px;bottom:18px;background:#efede7;color:#222522;padding:9px 10px;font-size:8px;letter-spacing:.16em;font-weight:700}
.project-one .before{background-image:linear-gradient(140deg,#665f57,#948879)}
.project-one .after{background-image:url('https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?auto=format&fit=crop&w=1000&q=83')}
.project-two .before{background-image:linear-gradient(140deg,#5f625e,#8a8d86)}
.project-two .after{background-image:url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1000&q=83')}
.project-copy{padding:48px 36px}
.project-copy>b{font-size:8px;letter-spacing:.2em;color:var(--ochre)}
.project-copy h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:34px;margin:18px 0}
.project-copy>p{font-size:11px;line-height:1.75;color:#b3b6b0}
.project-copy dl{margin:32px 0 0}
.project-copy dl div{display:flex;justify-content:space-between;border-top:1px solid #454845;padding:11px 0}
.project-copy dt{font-size:7px;letter-spacing:.15em;color:#888d87}.project-copy dd{margin:0;font-size:9px}
.process{display:grid;grid-template-columns:.7fr 1.3fr;padding:95px 5vw;background:#e8e2d6}
.process-title{padding-right:7vw}.process-title h2{font-size:clamp(44px,4.5vw,68px);line-height:1.1;margin:18px 0}
.process ol{list-style:none;padding:0;margin:0}
.process li{display:grid;grid-template-columns:70px 180px 1fr;align-items:start;border-top:1px solid #bdb7ab;padding:24px 0}
.process li span{font-size:9px;color:var(--ochre);letter-spacing:.15em}.process li strong{font-size:14px}.process li p{font-size:11px;line-height:1.7;margin:0;color:#66695f}
.quality{display:grid;grid-template-columns:1fr .9fr .55fr;min-height:560px;background:#f4f1ea}
.quality-photo{background:url('https://images.unsplash.com/photo-1589939705384-5185137a7f0f?auto=format&fit=crop&w=1200&q=82') center/cover}
.quality-copy{padding:90px 5vw}.quality-copy h2{font-size:clamp(46px,4.5vw,68px);margin:18px 0 25px}.quality-copy>p{font-size:12px;line-height:1.8;color:#62665e}
.quality-copy ul{list-style:none;padding:0;margin:28px 0}.quality-copy li{padding:12px 0;border-top:1px solid var(--line);font-size:10px}.quality-copy li:before{content:"—";color:var(--ochre);margin-right:12px}
.quality-stats{background:var(--ochre);color:#171915;display:grid;align-content:center}
.quality-stats div{padding:32px;border-bottom:1px solid #9f7334}.quality-stats strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:50px;font-weight:400}.quality-stats span{font-size:8px;letter-spacing:.15em}
.testimonial{padding:90px 8vw;background:#f4f1ea;text-align:center;border-top:1px solid var(--line)}.big-quote{font-family:Georgia,"Times New Roman",serif;font-size:90px;color:var(--ochre);line-height:.6}.testimonial blockquote{font-family:Georgia,"Times New Roman",serif;font-size:clamp(28px,3vw,45px);line-height:1.35;max-width:900px;margin:20px auto}.testimonial small{font-size:8px;letter-spacing:.18em}
.contact{display:grid;grid-template-columns:.75fr 1fr .55fr;background:#303330;color:#f2efe8}
.contact-title{padding:90px 5vw}.contact-title h2{font-size:clamp(48px,5vw,76px);line-height:1.05;margin:18px 0 24px}.contact-title>p{font-size:11px;line-height:1.8;color:#b3b7b1}
.contact-form{padding:90px 4vw;border-left:1px solid #555955;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form label{font-size:7px;letter-spacing:.15em;color:#aeb2ac}.contact-form input,.contact-form select,.contact-form textarea{width:100%;margin-top:8px;border:0;border-bottom:1px solid #686c68;background:transparent;color:#fff;padding:11px 0;outline:none}.contact-form option{color:#111}.contact-form .full{grid-column:1/3}.contact-form button{grid-column:1/3;border:0;background:var(--ochre);color:#171915;padding:16px 18px;text-align:left;display:flex;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:.13em;cursor:pointer}
.contact-data{padding:90px 30px;border-left:1px solid #555955;display:grid;align-content:center;gap:25px}.contact-data div{padding-bottom:20px;border-bottom:1px solid #555955}.contact-data span{display:block;font-size:7px;letter-spacing:.18em;color:#999e98;margin-bottom:8px}.contact-data strong{font-size:10px;line-height:1.6}
footer{background:#171917;color:#9a9e98;padding:30px 4vw;display:grid;grid-template-columns:1fr 2fr auto;gap:30px;align-items:center;font-size:8px}
.footer-brand{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:baseline;gap:4px}.footer-brand strong{font-size:18px;color:#f2efe8}.footer-brand span{font-size:11px}.footer-brand small{grid-column:1/3;font-size:6px;letter-spacing:.25em}.footer a{margin-left:18px;color:#c9ccc7}
.toast{position:fixed;z-index:100;right:24px;bottom:24px;background:#f3f1ea;color:#202220;border-left:5px solid var(--ochre);padding:14px 18px;font-size:10px;transform:translateY(120px);transition:.3s}.toast.show{transform:none}
@media(max-width:1050px){
  .hero{grid-template-columns:42% 58%}.hero-aside{display:none}
  .service-row{grid-template-columns:1fr 1fr}.service-row article:nth-child(3){border-left:1px solid var(--line)}
  .projects-head{grid-template-columns:1fr 1fr}.projects-head>p:last-child{grid-column:1/3}
  .project,.project-two{grid-template-columns:1fr 1fr}.project-copy{grid-column:1/3}.project-two .project-copy{grid-column:1/3;order:3}
  .quality{grid-template-columns:1fr 1fr}.quality-stats{grid-column:1/3;grid-template-columns:repeat(3,1fr)}
  .contact{grid-template-columns:1fr 1fr}.contact-data{grid-column:1/3;grid-template-columns:repeat(3,1fr);padding:35px}
}
@media(max-width:760px){
  .brand-mark{left:18px;top:18px}.brand-mark strong{font-size:20px}
  .index-tab{bottom:18px}.index-panel{padding:65px 20px;grid-template-columns:1fr 1fr}.index-kicker{grid-column:1/3}.index-panel a{padding:20px 14px}.index-panel a strong{font-size:24px}
  .hero{display:block}.hero-copy{padding:110px 20px 60px}.hero h1{font-size:58px}.hero-photo{min-height:500px}.project-meta{grid-template-columns:1fr}.project-meta div{padding:13px}
  .statement{grid-template-columns:1fr;padding:55px 20px;gap:20px}.statement-no{font-size:44px}.statement-sign{justify-self:start}
  .services{padding:70px 20px}.services header{display:block}.service-row{grid-template-columns:1fr}.service-row article,.service-row article:first-child,.service-row article:nth-child(3){border-left:0;border-right:0;border-bottom:1px solid var(--line)}
  .projects{padding:70px 20px}.projects-head{grid-template-columns:1fr}.projects-head>p:last-child{grid-column:auto}.project,.project-two{grid-template-columns:1fr}.project-photo{min-height:340px}.project-copy,.project-two .project-copy{grid-column:auto;order:initial}
  .process{grid-template-columns:1fr;padding:70px 20px}.process-title{padding:0 0 30px}.process li{grid-template-columns:50px 120px 1fr}
  .quality{grid-template-columns:1fr}.quality-photo{min-height:400px}.quality-copy{padding:65px 20px}.quality-stats{grid-column:auto;grid-template-columns:1fr}
  .testimonial{padding:70px 20px}
  .contact{grid-template-columns:1fr}.contact-title,.contact-form{padding:65px 20px}.contact-form{border-left:0;border-top:1px solid #555955;grid-template-columns:1fr}.contact-form .full,.contact-form button{grid-column:auto}.contact-data{grid-column:auto;grid-template-columns:1fr;padding:40px 20px;border-left:0;border-top:1px solid #555955}
  footer{grid-template-columns:1fr;padding:28px 20px}footer a{margin:0 18px 0 0}
}
