:root{
  --paper:#F4F0E5;
  --paper-2:#ECE6D6;
  --ink:#1A2420;
  --ink-soft:#4B564F;
  --blue:#0E6FA8;
  --blue-deep:#0A4E77;
  --line:#D8D0BB;
  --serif:"Fraunces",serif;
  --sans:"Inter",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;margin:0}
em{font-style:italic;color:var(--blue);font-weight:500}
p{line-height:1.65;color:var(--ink-soft)}

/* header */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,5vw,64px);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--paper);z-index:10;
}
.brand img{height:34px;width:auto}
.main-nav{display:flex;align-items:center;gap:34px;font-size:15px}
.main-nav a{padding:4px 0;border-bottom:1px solid transparent}
.main-nav a:not(.cta):hover{border-color:var(--ink)}
.cta{
  background:var(--ink);color:var(--paper)!important;
  padding:11px 20px;border-radius:2px;font-weight:600;font-size:14px;
  border:1px solid var(--ink);display:inline-block;transition:.2s;
}
.cta:hover{background:transparent;color:var(--ink)!important}
.menu-toggle{display:none;background:none;border:0;width:32px;height:24px;position:relative;cursor:pointer;padding:0}
.menu-toggle span{position:absolute;left:0;right:0;height:2px;background:var(--ink);transition:.2s}
.menu-toggle span:first-child{top:2px}
.menu-toggle span:last-child{bottom:2px}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(9px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-9px) rotate(-45deg)}

/* hero */
.hero{
  display:grid;grid-template-columns:1fr 260px;align-items:center;gap:40px;
  padding:clamp(60px,10vw,120px) clamp(20px,5vw,64px) clamp(70px,8vw,110px);
  max-width:1200px;margin:0 auto;
}
.hero-text{max-width:620px}
.hero h1{font-size:clamp(38px,5.6vw,64px);line-height:1.08}
.hero p{font-size:18px;margin:24px 0 30px;max-width:480px}
.hero-mark{width:100%;color:var(--blue);justify-self:end;opacity:.9}

/* section head */
.section-head{max-width:620px;margin:0 auto 40px;padding:0 clamp(20px,5vw,64px)}
.section-head h2{font-size:clamp(30px,4vw,44px)}
.section-head p{margin-top:12px;font-size:17px}

/* services index */
.services{padding:clamp(50px,8vw,90px) 0;border-top:1px solid var(--line)}
.index{list-style:none;margin:0 auto;padding:0 clamp(20px,5vw,64px);max-width:1000px;border-top:1px solid var(--line)}
.index li{border-bottom:1px solid var(--line)}
.index a{
  display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:22px;
  padding:22px 0;transition:.2s;
}
.index img{width:64px;height:64px;object-fit:cover;border-radius:2px}
.index .name{font-family:var(--serif);font-size:clamp(20px,2.6vw,28px);font-weight:600}
.index .desc{display:none}
.index .go{font-size:13px;font-weight:600;color:var(--blue);opacity:0;transition:.2s;justify-self:end}
.index a:hover .go{opacity:1}
.index a:hover .name{color:var(--blue)}
@media(min-width:700px){
  .index a{grid-template-columns:64px 280px 1fr auto}
  .index .desc{display:block;color:var(--ink-soft);font-size:15px}
}

/* detail blocks */
.details{max-width:1200px;margin:0 auto;padding:clamp(20px,5vw,64px)}
.details article{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);
  align-items:center;padding:clamp(40px,6vw,70px) 0;border-bottom:1px solid var(--line);
}
.details article:last-child{border-bottom:0}
.details img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.details h3{font-size:clamp(24px,3vw,34px);margin-bottom:14px}
.details p{font-size:16px;margin:0 0 18px}
.details a{font-weight:600;color:var(--blue);border-bottom:1px solid var(--blue);padding-bottom:2px}

/* method */
.method{background:var(--ink);color:var(--paper);padding:clamp(50px,8vw,90px) 0}
.method .section-head h2{color:var(--paper)}
.method ol{list-style:none;margin:0 auto;padding:0 clamp(20px,5vw,64px);max-width:800px;border-top:1px solid #37423C}
.method li{display:flex;gap:26px;padding:26px 0;border-bottom:1px solid #37423C}
.method b{font-family:var(--serif);font-size:15px;color:#8FA89D;flex:none;padding-top:3px}
.method strong{font-family:var(--serif);font-size:20px;font-weight:600;display:block;margin-bottom:6px}
.method p{color:#C9D2CB;margin:0;font-size:15px}

/* contact */
.contact{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);
  max-width:1200px;margin:0 auto;padding:clamp(60px,9vw,110px) clamp(20px,5vw,64px);
}
.contact-text h2{font-size:clamp(32px,4.4vw,50px)}
.contact-text p{margin-top:16px;font-size:17px;max-width:340px}
.contact form{display:grid;gap:20px;align-content:start}
.contact label{font-size:13px;font-weight:600;color:var(--ink-soft)}
.contact input,.contact textarea{
  display:block;width:100%;margin-top:8px;background:transparent;
  border:0;border-bottom:1px solid var(--line);padding:10px 2px;
  color:var(--ink);font:16px var(--sans);resize:vertical;
}
.contact input:focus,.contact textarea:focus{outline:0;border-color:var(--ink)}
.contact button{justify-self:start;margin-top:8px;cursor:pointer;font:600 14px var(--sans)}

/* footer */
footer{
  display:flex;align-items:center;flex-wrap:wrap;gap:28px;
  padding:32px clamp(20px,5vw,64px);border-top:1px solid var(--line);
  font-size:13px;color:var(--ink-soft);
}
footer img{height:24px}
footer nav{display:flex;gap:20px}
footer a[href^="mailto"]{margin-left:auto;font-weight:600;color:var(--ink)}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;
}

/* mobile */
@media(max-width:760px){
  .main-nav{
    position:fixed;inset:70px 0 0 0;background:var(--paper);
    flex-direction:column;align-items:flex-start;gap:0;padding:10px clamp(20px,5vw,64px);
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:.18s;border-top:1px solid var(--line);
  }
  .main-nav.open{transform:translateY(0);opacity:1;pointer-events:auto}
  .main-nav a{width:100%;padding:16px 0;border-bottom:1px solid var(--line)}
  .main-nav .cta{margin-top:16px;text-align:center}
  .menu-toggle{display:block}
  .hero{grid-template-columns:1fr}
  .hero-mark{width:150px;justify-self:start;order:-1}
  .details article,.details article:nth-child(even){grid-template-columns:1fr}
  .details article > div:first-child{order:1}
  .contact{grid-template-columns:1fr}
  footer{flex-direction:column;align-items:flex-start}
  footer a[href^="mailto"]{margin-left:0}
}